Laravel – ルートパラメーター～インスタンスを渡す

2021-11-01 / tau / コメントする

概要

ルートパラメーターは、idなどの値を指定するほか、モデルのインスタンスを直接渡してコントローラーで受け取ることができる。

値を渡して値を受け取る

ルーティング

以下の様にルーティングを設定したとする。

Requeset::get('/users/{id}', 'UserController@show')
  ->name('users.show');

1 2	Requeset::get('/users/{id}', 'UserController@show') ->name('users.show');

ルーティングは以下のようになる。

$ php artisan route:list
+--------+----------+------------+------------+------------------------------------------+------------+
| Domain | Method   | URI        | Name       | Action                                   | Middleware |
+--------+----------+------------+------------+------------------------------------------+------------+
........
|        | GET|HEAD | users/{id} | users.show | App\Http\Controllers\UserController@show | web        |
........
+--------+----------+------------+------------+------------------------------------------+------------+

$ php artisan route:list

+--------+----------+------------+------------+------------------------------------------+------------+

+--------+----------+------------+------------+------------------------------------------+------------+

........

| | GET|HEAD | users/{id} | users.show | App\Http\Controllers\UserController@show | web |

........

+--------+----------+------------+------------+------------------------------------------+------------+

ビューでの渡し方

ビューからのルーティングでidなどの値を渡すなら、以下のようにURLで展開させるかroute()ヘルパーの第2引数で指定する。

<!-- URLで値を展開させる -->
<a href="/users/{{ $id }}">プロフィール</a>

<!-- route()ヘルパーの第2引数に渡す -->
<a href="{{ route('users.show', $id) }}">プロフィール</a>

<a href="/users/{{ $id }}">プロフィール</a>

<a href="{{ route('users.show', $id) }}">プロフィール</a>

いずれの場合も、以下のようなURLでGETリクエストされる。

http://localhost/users/2 ←idの値

1	http://localhost/users/2 ←idの値

ログイン済みユーザーのidを渡す場合、以下のように書ける。

<!-- URLで値を展開させる -->
<a href="/user/{{ \Auth::user()->id }}">プロフィール</a>

<!-- route()ヘルパーの第2引数に渡す -->
<a href="{{ route('user.show', \Auth::user()->id) }}">プロフィール</a>

<a href="/user/{{ \Auth::user()->id }}">プロフィール</a>

<a href="{{ route('user.show', \Auth::user()->id) }}">プロフィール</a>

コントローラーでの受け取り方

コントローラー側でパラメーターを受け取る場合、アクションメソッドの引数にパラメーターが渡されるので、それをそのまま利用すればよい。

class UserController extends Controller
{
  public function getProfile($id) {
    return 'user name:" . \App\User::find($id)->name;
  }
}

// ブラウザー表示例
// user name:user2

class UserController extends Controller

{

public function getProfile($id) {

return 'user name:" . \App\User::find($id)->name;

}

// ブラウザー表示例

// user name:user2

モデルのインスタンスのまま渡して受け取る

ルーティング

以下の様にルーティングを設定する。

Requeset::get('/users/{user}', 'UserController@show')
  ->name('user.show');

1 2	Requeset::get('/users/{user}', 'UserController@show') ->name('user.show');

リソースルーティングで指定するなら以下のとおり。

Route::resource('users', 'UserController')
  ->only(['show']);

1 2	Route::resource('users', 'UserController') ->only(['show']);

何れの場合もルーティングは以下のようになる。

$ php artisan route:list
+--------+----------+--------------+------------+------------------------------------------+------------+
| Domain | Method   | URI          | Name       | Action                                   | Middleware |
+--------+----------+--------------+------------+------------------------------------------+------------+
........
|        | GET|HEAD | users/{user} | users.show | App\Http\Controllers\UserController@show | web        |
........
+--------+----------+--------------+------------+------------------------------------------+------------+

$ php artisan route:list

+--------+----------+--------------+------------+------------------------------------------+------------+

+--------+----------+--------------+------------+------------------------------------------+------------+

........

| | GET|HEAD | users/{user} | users.show | App\Http\Controllers\UserController@show | web |

........

+--------+----------+--------------+------------+------------------------------------------+------------+

ビューでの渡し方

ビューからからのルーティングでモデルのインスタンスを渡す場合も、URLで展開させるかroute()ヘルパーの第2引数で指定する。ここでは認証済みのユーザーインスタンスを渡している。

<!-- URLで値を展開させる -->
<a href="/users/{{ \Auth::user() }}">プロフィール</a>

<!-- route()ヘルパーの第2引数に渡す -->
<a href="{{ route('users.show', \Auth::user()) }}">プロフィール</a>

<a href="/users/{{ \Auth::user() }}">プロフィール</a>

<a href="{{ route('users.show', \Auth::user()) }}">プロフィール</a>

インスタンスを渡しても、ルートパラメーターはidの値になる。

http://localhost/users/2

1	http://localhost/users/2

コントローラーでの受け取り方

コントローラーのアクションでは、引数にモデルクラスのメソッドインジェクションを適用して、idに対応したインスタンスを受け取る。

class UserController extends Controller
{
  public function getProfile(\App\User $user) {
    return 'user name:" . $user->name;
  }
}

// ブラウザー表示例
// user name:user2

class UserController extends Controller

{

public function getProfile(\App\User $user) {

return 'user name:" . $user->name;

}

// ブラウザー表示例

// user name:user2

コントローラーの冒頭でモデルをuse指定してもよい。

use App\User;
// user \App\Userでもよい

class UserController extends Controller
{
  public function getProfile(User $user) {
    return 'user name:" . $user->name;
  }
}

// ブラウザー表示例
// user name:user2

use App\User;

// user \App\Userでもよい

class UserController extends Controller

{

public function getProfile(User $user) {

return 'user name:" . $user->name;

}

// ブラウザー表示例

// user name:user2

Laravel – アップロード画像の変更・削除

2021-10-28 / tau / コメントする

概要

公開領域のディスクに保存された画像ファイルを変更・削除する手順を整理する。

変更は現在のファイルを削除して新しいファイルを保存するので、画像ファイルの削除手順がキーになる。

一般的なアップロードファイルの削除はこちらを参照。

ファイルの削除手順

storageディレクトリーのディスクに保存された画像ファイルの削除は、以下で行う。

\Storage::disk('ディスク')->delete('ファイルパス');

1	\Storage::disk('ディスク')->delete('ファイルパス');

ここで'ディスク'と'ファイルパス'は、保存・登録でstore()メソッドの引数に指定したものと同じ。

データの変更

例題のアプリケーションを、画像ファイルのほか、商品名や価格も併せて変更できるように修正する。

ルーティング

画像データの編集は、GETメソッドでeditアクションにルーティングされる。
編集されたデータの更新登録は、PATCHメソッドでupdateアクションにルーティングされる。

$ php artisan route:list
+--------+-----------+-------------------+----------------+--------------------------------------------+------------+
| Domain | Method    | URI               | Name           | Action                                     | Middleware |
+--------+-----------+-------------------+----------------+--------------------------------------------+------------+
........
|        | PUT|PATCH | items/{item}      | items.update   | App\Http\Controllers\ItemController@update | web        |
|        | GET|HEAD  | items/{item}/edit | items.edit     | App\Http\Controllers\ItemController@edit   | web        |
........
+--------+-----------+-------------------+----------------+--------------------------------------------+------------+

$ php artisan route:list

+--------+-----------+-------------------+----------------+--------------------------------------------+------------+

+--------+-----------+-------------------+----------------+--------------------------------------------+------------+

........

| | PUT|PATCH | items/{item} | items.update | App\Http\Controllers\ItemController@update | web |

| | GET|HEAD | items/{item}/edit | items.edit | App\Http\Controllers\ItemController@edit | web |

........

+--------+-----------+-------------------+----------------+--------------------------------------------+------------+

ビューからのリンク～index.blade.php

indexページで一覧された各商品に、編集のリンクを配置する。要点としては、

a要素のhrefの遷移先でroute('items.edit', $item)をしている
第1引数はeditのルート名、第2引数は編集対象のデータインスタンス
GETのURLは以下の様に展開される
- アプリケーションルート/{$id}/edit

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>商品一覧・入力</title>
  </head>
  <body>
    <h1>商品一覧・入力</h1>
    ........
    {{-- 商品データ・画像表示 --}}
    @foreach ($items as $item)
      <p>{{ $item->name }} : {{ $item->price }}円</p>
      <div>
        @if ($item->image !=='')
          <img src="{{ \Storage::url($item->image) }}" width="25%">
        @else
          <img src="{{ \Storage::url('items/no_image.png') }}">
        @endif
      </div>
      <a href="{{ route('items.edit', $item) }}">内容編集</a>
    @endforeach
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

........

@foreach ($items as $item)

<p>{{ $item->name }} : {{ $item->price }}円</p>

<div>

@if ($item->image !=='')

<img src="{{ \Storage::url($item->image) }}" width="25%">

@else

@endif

</div>

@endforeach

</body>

</html>

コントローラー～edit

GETメソッドでルーティングされたeditアクションでは、URLに含まれる$idに対応するインスタンス$itemがデータベースから引数として渡され、このインスタンスをそのままeditビューに渡している。

class ItemController extends Controller
{
    ........
    public function edit(Item $item)
    {
        return view('items.edit', ['item' => $item]);
    }
    ........
}

class ItemController extends Controller

{

........

public function edit(Item $item)

{

return view('items.edit', ['item' => $item]);

}

........

}

ビュー～edit.blade.php

editビューでは渡された$itemインスタンスの内容を各input要素に表示し、画像ファイルのパスから画像を表示している。

画像を扱うため、formのenctypeオプションを指定している
form要素で指定できるメソッドはGETかPOSTだけだが、updateルートはPATCHメソッドを期待しているので、@methodディレクティブで'patch'を指定している
新規入力時と同じく、フォームリクエストで編集時の入力バリデーションを行っている

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>商品データ編集</title>
  </head>
  <body>
    <h1>商品データ編集</h1>

    <p>商品ID: {{ $item->id }}</p>
    <form method="post" action="{{ route('items.update', $item) }}" enctype="multipart/form-data">
      @csrf
      @method('patch')
      <div>
        <label>商品名:
          <input type="text" name="name" value="{{ $item->name }}">
        </label>
      </div>
      <div>
        <label>価　格:
          <input type="text" name="price" value="{{ $item->price }}">円
        </label>
      </div>
      <div>
        @if ($item->image !=='')
          <img src="{{ \Storage::url($item->image) }}" width="25%">
        @else
          <img src="{{ \Storage::url('items/no_image.png') }}">
        @endif
      </div>
      <div>
        <input type="file" name="image">
      </div>
      <input type="submit" value="更新">
    </form>
    <a href="{{ route('items.index') }}">一覧に戻る</a>

    {{-- バリデーションエラー表示 --}}
    @foreach ($errors->all() as $error)
      <p>{{ $error }}</p>
    @endforeach
  </body>
</html>

<!DOCTYPE html>

<head>

<title>商品データ編集</title>

</head>

<body>

<h1>商品データ編集</h1>

@csrf

@method('patch')

<div>

<label>商品名:

</label>

</div>

<div>

<label>価　格:

<input type="text" name="price" value="{{ $item->price }}">円

</label>

</div>

<div>

@if ($item->image !=='')

<img src="{{ \Storage::url($item->image) }}" width="25%">

@else

@endif

</div>

<div>

</div>

</form>

<a href="{{ route('items.index') }}">一覧に戻る</a>

@foreach ($errors->all() as $error)

<p>{{ $error }}</p>

@endforeach

</body>

</html>

コントローラー～update

PATCHメソッドでルーティングされたupdateアクションでは、編集入力内容によって、商品データの内容と画像ファイルを更新している。

編集時に画像が選択されていれば、現在のファイルを削除して、選択されたファイルを保存
- このときにファイルのパスも取得
商品内容、画像ファイルへのパスでデータの内容を更新

class ItemController extends Controller
{
    ........
    public function update(ItemRequest $request, Item $item)
    {
        // 画像ファイルインスタンス取得
        $image = $request->file('image');
        // 現在の画像へのパスをセット
        $path = $item->image;
        if (isset($image)) {
            // 現在の画像ファイルの削除
            \Storage::disk('public')->delete($path);
            // 選択された画像ファイルを保存してパスをセット
            $path = $image->store('items', 'public');
        }
        // データベースを更新
        $item->update([
            'name' => $request->name,
            'price' => $request->price,
            'image' => $path,
        ]);

        return redirect()->route('items.edit', $item);
    }
    ........
}

class ItemController extends Controller

{

........

public function update(ItemRequest $request, Item $item)

{

// 画像ファイルインスタンス取得

$image = $request->file('image');

// 現在の画像へのパスをセット

$path = $item->image;

if (isset($image)) {

// 現在の画像ファイルの削除

\Storage::disk('public')->delete($path);

// 選択された画像ファイルを保存してパスをセット

$path = $image->store('items', 'public');

}

// データベースを更新

$item->update([

'name' => $request->name,

'price' => $request->price,

'image' => $path,

]);

return redirect()->route('items.edit', $item);

}

........

}

データの削除

ルーティング

indexページで一覧表示された商品の削除ボタンを押すと、DELETEメソッドでdestroyにルーティングされる。

$ php artisan route:list
+--------+--------+--------------+---------------+---------------------------------------------+------------+
| Domain | Method | URI          | Name          | Action                                      | Middleware |
+--------+--------+--------------+---------------+---------------------------------------------+------------+
........
|        | DELETE | items/{item} | items.destroy | App\Http\Controllers\ItemController@destroy | web        |
........
+--------+--------+--------------+---------------+---------------------------------------------+------------+

$ php artisan route:list

+--------+--------+--------------+---------------+---------------------------------------------+------------+

+--------+--------+--------------+---------------+---------------------------------------------+------------+

........

| | DELETE | items/{item} | items.destroy | App\Http\Controllers\ItemController@destroy | web |

........

+--------+--------+--------------+---------------+---------------------------------------------+------------+

ビューへの削除ボタン配置～index.blade.php

indexページの各商品表示にフォームと削除ボタンを加える。

form要素ではmethod="post"を指定し、@methodディレクティブで'delete'メソッドを指定している
削除する商品を指定してdestroyにルーティングするだけなので、フォームにはsubmitボタンだけが配置されている

    {{-- 商品データ・画像表示 --}}
    @foreach ($items as $item)
      <p>{{ $item->name }} : {{ $item->price }}円</p>
      <div>
        @if ($item->image !=='')
          <img src="{{ \Storage::url($item->image) }}" width="25%">
        @else
          <img src="{{ \Storage::url('items/no_image.png') }}">
        @endif
      </div>
      <a href="{{ route('items.edit', $item) }}">内容編集</a>
      <form method="post" action="{{ route('items.destroy', $item) }}">
        @csrf
        @method('delete')
        <input type="submit" value="データ削除">
      </form>
    @endforeach

@foreach ($items as $item)

<p>{{ $item->name }} : {{ $item->price }}円</p>

<div>

@if ($item->image !=='')

<img src="{{ \Storage::url($item->image) }}" width="25%">

@else

@endif

</div>

@csrf

@method('delete')

</form>

@endforeach

コントローラー～destroy

destroyアクションでは、ファイルが登録されていればpublicディスクから削除し、商品データをデータベースから削除している。

    public function destroy(Item $item)
    {
        // 商品画像ファイルへのパスを取得
        $path = $item->image;
        // ファイルが登録されていれば削除
        if ($path !== '') {
          \Storage::disk('public')->delete($path);
        }
        // データベースからデータを削除
        $item->delete();

        return redirect()->route('items.index');
    }

public function destroy(Item $item)

{

// 商品画像ファイルへのパスを取得

$path = $item->image;

// ファイルが登録されていれば削除

if ($path !== '') {

\Storage::disk('public')->delete($path);

}

// データベースからデータを削除

$item->delete();

return redirect()->route('items.index');

}

Laravel – アップロード画像の読み込み・表示

2021-10-28 / tau / コメントする

概要

データベースに登録されたパスから画像ファイルを取得し、ビューで表示する手順を整理する。ここでは、indexページで画像のほかに商品名や商品価格も表示させる。

表示された画像ファイルの変更・削除についてはこちらを参照。

publicディスクへのリンク作成

アップロード画像を保存したpublicディスクはstrage/app/publicに割り当てられているが、このディレクトリーはWebサーバー上は公開されていない。

そこで、publicディスクをアプリケーション下のpublicディレクトリーで公開するため、以下のコマンドを実行しておく。

$ php artisan storage:link

1	$ php artisan storage:link

これにより、publicディレクトリーにシンボリックリンクstorageが作成されて、publicディスクに割り当てられたディレクトリーに公開領域からアクセスが可能になる。

$ ls -Al public
合計 16
-rw-rw-r--. 1 vagrant vagrant  593  9月  6 21:24 .htaccess
-rw-rw-r--. 1 vagrant vagrant    0  9月  6 21:24 favicon.ico
-rw-rw-r--. 1 vagrant vagrant 1823  9月  6 21:24 index.php
drwxrwxr-x. 4 vagrant vagrant  159  9月  6 21:24 object_sample
-rw-rw-r--. 1 vagrant vagrant   24  9月  6 21:24 robots.txt
lrwxrwxrwx. 1 vagrant vagrant   70 10月 21 21:06 storage -> /home/..../laravel_tutorial/storage/app/public

$ ls -Al public

合計 16

-rw-rw-r--. 1 vagrant vagrant 593 9月 6 21:24 .htaccess

-rw-rw-r--. 1 vagrant vagrant 0 9月 6 21:24 favicon.ico

-rw-rw-r--. 1 vagrant vagrant 1823 9月 6 21:24 index.php

drwxrwxr-x. 4 vagrant vagrant 159 9月 6 21:24 object_sample

-rw-rw-r--. 1 vagrant vagrant 24 9月 6 21:24 robots.txt

lrwxrwxrwx. 1 vagrant vagrant 70 10月 21 21:06 storage -> /home/..../laravel_tutorial/storage/app/public

コントローラー～index

indexアクションでitemsテーブルの全データを取得し、これをビューに渡して表示させる。

class ItemController extends Controller
{
    public function index()
    {
        $items = Item::all();

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

class ItemController extends Controller

{

public function index()

{

$items = Item::all();

return view('items.index', ['items' => $items]);

}

........

}

ビュー～index.blade.php

コントローラーから$itemsを受け取り、@foreachディレクティブによって全データの内容と画像データを表示する。

ここでは\Storageファサードのurl()メソッドを使って画像ファイルのパスを得ていて、これによってpublicディレクトリー下のstorage/app/publicディレクトリー下にある画像ファイルにアクセスしている。

\Storage::url(publicディスク下のパス)

1	\Storage::url(publicディスク下のパス)

公開領域のファイルのURLについてはこちらを参照。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>商品一覧・入力</title>
  </head>
  <body>
    <h1>商品一覧・入力</h1>
    ........
    {{-- 商品データ・画像表示 --}}
    @foreach ($items as $item)
      <p>{{ $item->name }} : {{ $item->price }}円</p>
      <div>
        @if ($item->image !=='')
          <img src="{{ \Storage::url($item->image) }}" width="25%">
        @else
          <img src="{{ \Storage::url('items/no_image.png') }}">
        @endif
      </div>
    @endforeach
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

........

@foreach ($items as $item)

<p>{{ $item->name }} : {{ $item->price }}円</p>

<div>

@if ($item->image !=='')

<img src="{{ \Storage::url($item->image) }}" width="25%">

@else

@endif

</div>

@endforeach

</body>

</html>

なお、商品画像が登録されていない場合は、プレースホルダー画像を表示させている。

Laravel – アップロード画像の保存・登録

2021-10-28 / tau / コメントする

概要

フォームで選択した画像ファイルをサーバーに保存し、画像ファイルへのパスを含むデータをデータベースに登録する手順を整理する。

要点は以下のとおり。

フォームリクエストからアップロード画像を取得
画像を公開エリアに保存し、パスを取得
画像へのパスをデータベースに登録

一般的なアップロードファイルの保存方法についてはこちらを参照。

画像ファイル保存・登録後の画像の表示についてはこちらを参照。また、保存済みの画像ファイルの変更・削除についてはこちらを参照。

コントローラー～store

フォームで画像選択後にsubmitボタンを押すと、POSTメソッドでコントローラーのstoreアクションへルーティングされる。storeアクションでの処理は以下のとおり。

フォームリクエストから画像ファイルのインスタンスを取得
一時保存領域に保存されたファイル本体を、store()メソッドで公開領域に保存
store()メソッドの戻り値として返される、画像ファイルへのパスを取得
Itemsデータの他の項目とともに、ファイルへのパスをデータベースへ登録

class ItemController extends Controller
{
    ........
    public function store(ItemRequest $request)
    {
        // アップロードされたファイルの取得
        $image = $request->file('image');
        // ファイルの保存とパスの取得
        $path = isset($image) ? $image->store('items', 'public') : '';

        // 商品をデータベースに登録
        Item::create([
            'name' => $request->name,
            'price' => $request->price,
            'image' => $path,
        ]);

        return redirect()->route('items.index');
    }
    ........
}

class ItemController extends Controller

{

........

public function store(ItemRequest $request)

{

// アップロードされたファイルの取得

$image = $request->file('image');

// ファイルの保存とパスの取得

$path = isset($image) ? $image->store('items', 'public') : '';

// 商品をデータベースに登録

Item::create([

'name' => $request->name,

'price' => $request->price,

'image' => $path,

]);

return redirect()->route('items.index');

}

........

}

ここでは、store()の第1引数と第2引数を指定し、publicディスク内のitemsディレクトリー下にファイルを保存している。

publicディスクは環境設定でstorage/app/publicが充てられる
ファイルの実体はstorage/app/public/itemsディレクトリー下に保存される。

データ登録確認

indexページで新規データを登録した結果を、MySQLのコンソールで確認した例。

mysql> select * from items\G
*************************** 1. row ***************************
        id: 1
      name: item1
     price: 100
     image:
created_at: 2021-10-27 10:00:51
updated_at: 2021-10-27 10:00:51
*************************** 2. row ***************************
        id: 2
      name: 商品2
     price: 250
     image: items/KeeAWS296C5TPymJm8BwmzJbAcsEb2jqONOUZXcZ.jpg
created_at: 2021-10-27 10:01:03
updated_at: 2021-10-27 10:01:19
2 rows in set (0.00 sec)

mysql> select * from items\G

*************************** 1. row ***************************

id: 1

name: item1

price: 100

image:

created_at: 2021-10-27 10:00:51

updated_at: 2021-10-27 10:00:51

*************************** 2. row ***************************

id: 2

name: 商品2

price: 250

image: items/KeeAWS296C5TPymJm8BwmzJbAcsEb2jqONOUZXcZ.jpg

created_at: 2021-10-27 10:01:03

updated_at: 2021-10-27 10:01:19

2 rows in set (0.00 sec)

画像ファイルはファイル名にランダム文字列が与えられ、publicディスク下のitemsディレクトリー内に保存される。imageカラムにitemsディレクトリー以下のパスが登録されている。

publicディスクが充てられているstorage/app/publicディレクトリーを確認すると、itemsディレクトリー内に上記のファイルが保存されているのが確認できる。

$ ls storage/app/public/items/
KeeAWS296C5TPymJm8BwmzJbAcsEb2jqONOUZXcZ.jpg
no_image.png

$ ls storage/app/public/items/

KeeAWS296C5TPymJm8BwmzJbAcsEb2jqONOUZXcZ.jpg

no_image.png

no_image.pngは、画像が登録されていない場合に表示するプレースホルダー画像。

Laravel – アップロード画像の入力

2021-10-28 / tau / コメントする

概要

画像ファイルを含むフォームの作り方、画像ファイルに対するバリデーションについて整理する。

アップロード画像処理～準備で枠組みを作った商品データのアプリケーションを加工していく。

一般的なアップロードファイルの入力・取得についてはこちらを参照。

入力・登録後のアップロード画像の登録・保存についてはこちらを参照。

ルーティング

通常のリソースベースでは、新規データの入力はcreateルートが想定されているが、ここではindexページに商品入力フォームを配置し、そこで商品データの内容や商品画像を入力する。

+--------+----------+-------+-------------+-------------------------------------------+------------+
| Domain | Method   | URI   | Name        | Action                                    | Middleware |
+--------+----------+-------+-------------+-------------------------------------------+------------+
........
|        | GET|HEAD | items | items.index | App\Http\Controllers\ItemController@index | web        |
........
+--------+----------+-------+-------------+-------------------------------------------+------------+

+--------+----------+-------+-------------+-------------------------------------------+------------+

+--------+----------+-------+-------------+-------------------------------------------+------------+

........

........

+--------+----------+-------+-------------+-------------------------------------------+------------+

商品入力ページ～index.blade.php

indexページに商品入力フォームを配置し、そこに商品画像ファイルの選択要素を含める。画像選択を含むフォームに関する要点は以下のとおり。

form要素に以下のオプションを加える
- enctype="multipart/form-data"
input要素でtype="file"を指定する

なおリソースベースによるデータ登録の場合、createアクションでルーティングされるページに入力フォームを置くことが想定されているが、ここでは商品一覧を表示するindexページで商品入力も行い、その入力フォームからstoreアクションを呼び出す。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>商品一覧・入力</title>
  </head>
  <body>
    <h1>商品一覧・入力</h1>

    <form method="post" action="{{ route('items.store') }}" enctype="multipart/form-data">
      @csrf
      <div>
        <input type="text" name="name" placeholder="商品名を入力">
      </div>
      <div>
        <input type="number" name="price" placeholder="価格を入力">
      </div>
      <div>
        <input type="file" name="image">
      </div>
      <input type="submit" value="商品登録">
    </form>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

@csrf

<div>

</div>

<div>

</div>

<div>

</div>

</form>

</body>

</html>

フォームリクエスト

フォームリクエストでバリデーションを行う。フォームリクエストItemRequestは以下のコマンドで作成。

$ php artisan make:request ItemRequest
Request created successfully.

1 2	$ php artisan make:request ItemRequest Request created successfully.

生成されたフォームリクエストの雛形で、以下を編集。

authorize()の戻り値をtrueに変更
rules()の戻り値の配列にバリデーションルールを記述

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class ItemRequest extends FormRequest
{
    public function authorize()
    {
        return true;
    }

    public function rules()
    {
        return [
            'name' => ['required'],
            'price' => ['required', 'integer', 'min:0'],
            'image' => ['file', 'mimes:jpeg,jpg,png',
                        'dimensions:min_width=100,min_height=100,max_width=2000,max_height=2000'],
        ];
    }
}

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class ItemRequest extends FormRequest

{

public function authorize()

{

return true;

}

public function rules()

{

return [

'name' => ['required'],

'price' => ['required', 'integer', 'min:0'],

'image' => ['file', 'mimes:jpeg,jpg,png',

'dimensions:min_width=100,min_height=100,max_width=2000,max_height=2000'],

];

}

コントローラー～index/store

コントローラーでは2つのアクションメソッドを定義している。

indexアクションではindexページを表示するのみ
storeアクションでは、フォームデータに基づいてItemインスタンスをデータベースに登録
- ただし現段階では、画像ファイルパスを格納するimageに、仮置きで空文字列''をセットしている。
- この変数へのファイルパスの設定は、別項のアップロード画像ファイルの保存・登録で実装する。

<?php

namespace App\Http\Controllers;

use App\Item;
use Illuminate\Http\Request;

use App\Http\Requests\ItemRequest;

class ItemController extends Controller
{
    public function index()
    {
        return view('items.index');
    }

    public function store(ItemRequest $request)
    {
        // 商品をデータベースに登録
        Item::create([
            'name' => $request->name,
            'price' => $request->price,
            'image' => '',
        ]);
    }
}

<?php

namespace App\Http\Controllers;

use App\Item;

use Illuminate\Http\Request;

use App\Http\Requests\ItemRequest;

class ItemController extends Controller

{

public function index()

{

return view('items.index');

}

public function store(ItemRequest $request)

{

// 商品をデータベースに登録

Item::create([

'name' => $request->name,

'price' => $request->price,

'image' => '',

]);

}

ここでの留意点は以下のとおり。

作成したフォームリクエストItemRequestをuseでインポートし、メソッドインジェクションをRequestからItemRequestに変更している
create()メソッドがマスアサインメントのため、Itemモデルで$fillableの定義が必要

Itemモデルでの$fillable定義は以下の部分を追記。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Item extends Model
{
    protected $fillable = ['name', 'price', 'image'];
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Item extends Model

{

protected $fillable = ['name', 'price', 'image'];

}

データ登録確認

この状況でアプリケーションを実行し、フォームでデータを登録したのが以下の例。

画像ファイルのパスは、まだ未登録の状態。

mysql> select * from items;
+----+-------+-------+-------+---------------------+---------------------+
| id | name  | price | image | created_at          | updated_at          |
+----+-------+-------+-------+---------------------+---------------------+
|  1 | item1 |   100 |       | 2021-10-25 21:25:52 | 2021-10-25 21:25:52 |
+----+-------+-------+-------+---------------------+---------------------+
1 row in set (0.00 sec)

mysql> select * from items;

+----+-------+-------+-------+---------------------+---------------------+

+----+-------+-------+-------+---------------------+---------------------+

| 1 | item1 | 100 | | 2021-10-25 21:25:52 | 2021-10-25 21:25:52 |

+----+-------+-------+-------+---------------------+---------------------+

1 row in set (0.00 sec)

Laravel – アップロード画像処理

2021-10-28 / tau / コメントする

概要

ユーザーのプロフィール画像や商品画像をアップロードし、ユーザーデータや商品データに関連付けて保存・更新・削除する。

ファイルへのパスをデータベースに保存し、ファイル本体はサーバーに保存する。

準備

仕様

全体仕様は以下の通り。

商品管理を扱う
商品データは商品名、商品価格と商品画像で、入力フォームで入力／選択
入力データはデータベースに保存
- DBには商品名と画像ファイルへのパスを登録
登録結果はindexページで一覧表示され、そのページに入力フォームも組み込む
- 画像未登録の場合はプレースホルダー画像を表示
各商品に商品名と画像、更新ボタン・商品削除ボタンを備える
更新ボタンを押すと更新ページに遷移
- 更新ページでは対象商品の商品名・現在の画像、商品名入力要素・画像選択要素、更新実行ボタンを表示
- 更新実行ボタンを押すと編集後の内容でデータを更新し、画像が選択されていれば商品画像を変更
商品削除ボタンを押すと画像と商品データを削除

モデルとコントローラーの作成

$ php artisan make:model Item --controller --migration
Model created successfully.
Created Migration: 2021_10_21_225313_create_items_table
Controller created successfully.

$ php artisan make:model Item --controller --migration

Model created successfully.

Created Migration: 2021_10_21_225313_create_items_table

Controller created successfully.

ルーティング

ルーティングはリソースベースとし、createとshow以外の全てを設定。

Route::resource('items', 'ItemController')
  ->except(['create', 'show']);

1 2	Route::resource('items', 'ItemController') ->except(['create', 'show']);

自動設定されるルーティング。

$ php artisan route:list
+--------+-----------+-------------------+---------------+---------------------------------------------+------------+
| Domain | Method    | URI               | Name          | Action                                      | Middleware |
+--------+-----------+-------------------+---------------+---------------------------------------------+------------+
.........
|        | GET|HEAD  | items             | items.index   | App\Http\Controllers\ItemController@index   | web        |
|        | POST      | items             | items.store   | App\Http\Controllers\ItemController@store   | web        |
|        | DELETE    | items/{item}      | items.destroy | App\Http\Controllers\ItemController@destroy | web        |
|        | PUT|PATCH | items/{item}      | items.update  | App\Http\Controllers\ItemController@update  | web        |
|        | GET|HEAD  | items/{item}/edit | items.edit    | App\Http\Controllers\ItemController@edit    | web        |
.........
+--------+-----------+-------------------+---------------+---------------------------------------------+------------+

$ php artisan route:list

+--------+-----------+-------------------+---------------+---------------------------------------------+------------+

+--------+-----------+-------------------+---------------+---------------------------------------------+------------+

.........

| | DELETE | items/{item} | items.destroy | App\Http\Controllers\ItemController@destroy | web |

| | PUT|PATCH | items/{item} | items.update | App\Http\Controllers\ItemController@update | web |

| | GET|HEAD | items/{item}/edit | items.edit | App\Http\Controllers\ItemController@edit | web |

.........

+--------+-----------+-------------------+---------------+---------------------------------------------+------------+

マイグレーション

マイグレーションファイルの編集

商品名、価格、画像ファイルへのパスのカラムを追加し、日付は2038問題対応でdatetime型に変更。

class CreateItemsTable extends Migration
{
    public function up()
    {
        Schema::create('items', function (Blueprint $table) {
            $table->bigIncrements('id');

            // 商品名
            $table->string('name');
            // 価格
            $table->integer('price');
            // 画像ファイルパス
            $table->string('image');

            //$table->timestamps();
            $table->datetime('created_at');
            $table->datetime('updated_at');
        });
    }
    ........
}

class CreateItemsTable extends Migration

{

public function up()

{

Schema::create('items', function (Blueprint $table) {

$table->bigIncrements('id');

// 商品名

$table->string('name');

// 価格

$table->integer('price');

// 画像ファイルパス

$table->string('image');

//$table->timestamps();

$table->datetime('created_at');

$table->datetime('updated_at');

});

}

........

}

マイグレーション

マイグレーションを実行。

$ php artisan migrate
Migrating: 2021_10_21_225313_create_items_table
Migrated:  2021_10_21_225313_create_items_table (0.02 seconds)

$ php artisan migrate

Migrating: 2021_10_21_225313_create_items_table

Migrated: 2021_10_21_225313_create_items_table (0.02 seconds)

アップロード画像処理の実装

実装の流れ

準備ができたアプリケーションに対して、以下の順番でアップロード画像処理を実装していく。

入力・アップロード

入力・アップロードでは以下のことを整理する。

画像ファイルの選択を含む入力フォーム
画像ファイル選択要素のバリデーション

処理の流れは以下のとおり。

画像ファイルを選択してフォームの送信ボタンを押す
ファイル本体がアップロードされ、サーバーの一時保存領域に保存される
アップロードファイルのインスタンスがリクエストから取得可能となる

要点は以下の通り。

form要素のオプションにenctype="multipart/form-data"を加える
input要素のオプションでtype="file"とする
画像ファイルに関するバリデーションルールは、['file', 'mimes=jpeg,jpg,png', ...]など

詳細はアップロード画像 – 入力を参照。

アップロード画像の保存・登録

アップロード画像の保存・登録では以下のことを整理する。

storeルートによるデータ保存
リクエストからの画像インスタンスの取得
画像ファイルの公開エリアへの保存
画像ファイルへのパスのデータベース登録

処理の流れは以下の通り。

画像ファイルのインスタンスをリクエストから取得
- たとえば$image = $request->image
画像ファイルの保存とパスの取得
- $path = $image->store('ディレクトリー', 'ディスク')
- ただしフォームで画像ファイルが選択されているときだけ処理する
画像ファイルへのパスのデータベース登録
- create([..., $image => $path, ...])

詳細はアップロード画像 – 登録・保存を参照。

アップロード画像の表示

画像の表示では以下のことを整理する。

画像ファイルが保存されたpublicディスクのシンボリックリンクの作成
画像ファイルへのパスを含むデータの取得
パスを介した画像ファイルの表示

要点は以下の通り。

画像ファイルを保存しているpublicディスクはstorage/app/publicディレクトリーに充てられているが、Web上は非公開
このpublicディスクへのシンボリックリンクを、アプリケーションのpublicディレクトリーに作成
- php artisan storage:link
コントローラーで画像ファイルへのパスを含むデータをデータベースから取得
- $items = Item::all();
データを1つずつ取り出しながら、ビューのimg要素で画像ファイルを表示
- <img src="{{ \Storage::url($item->image) }}">

詳細はアップロード画像の表示を参照。

アップロード画像の変更・削除

画像の変更・削除機能では以下のことを整理する。

edit～updateルートによるデータの編集と更新
destroyルートによるデータの削除
ディスクに保存された画像ファイルの削除
データ編集と編集内容によるデータ更新
ファイルとデータの削除

要点は以下のとおり。

ディスクに保存されたファイルの削除方法
- \Storage::disk('ディスク')->delete('ファイルパス')

詳細はアップロード画像の変更・削除を参照。

Laravel – view()とredirect()

2021-10-25 / tau / コメントする

概要

コントローラーのアクションでの処理の後、returnで指定するview()とredirect()の違い。

view()

view()はブレードテンプレートとそれに渡す変数・値を指定して、テンプレートの内容を表示(レンダリング)させる。

return view('ブレードテンプレート名', ['変数名' => 変数の内容, ...]);

1	return view('ブレードテンプレート名', ['変数名' => 変数の内容, ...]);

テンプレート名は、resources/views/以下のディレクトリー、ファイルを'.'で繋ぎ、テンプレート名の'.blade.php'は書かない。

たとえばテンプレートファイルのパスが

resources/views/products/index.blade.php

のとき、view()では以下のように指定する。

view('products.index');

1	view('products.index');

redirect()

リダイレクトはURLかルート名を指定して、コントローラーの処理とその後のレンダリングを実行させる。

// ドメイン名以下のURLを指定する場合
return redirect('URLパス');

// ルーティングで設定されたルート名を指定する場合
return redirect()->route('ルート名');

// ドメイン名以下のURLを指定する場合

return redirect('URLパス');

// ルーティングで設定されたルート名を指定する場合

return redirect()->route('ルート名');

たとえば以下のようなルーティング設定の場合。

+--------+-----------+----------+----------------+----------------------------------------------+------------+
| Domain | Method    | URI      | Name           | Action                                       | Middleware |
+--------+-----------+----------+----------------+----------------------------------------------+------------+
........
|        | GET|HEAD  | products | products.index | App\Http\Controllers\ProductController@index | web        |
........
+--------+-----------+----------+----------------+----------------------------------------------+------------+

+--------+-----------+----------+----------------+----------------------------------------------+------------+

+--------+-----------+----------+----------------+----------------------------------------------+------------+

........

........

+--------+-----------+----------+----------------+----------------------------------------------+------------+

リダイレクトは以下のように指定する。

// ドメイン名以下のURLを指定する場合
return redirect('/index');

// ルーティングで設定されたルート名を指定する場合
return redirect()->route('products.index');

// ドメイン名以下のURLを指定する場合

return redirect('/index');

// ルーティングで設定されたルート名を指定する場合

return redirect()->route('products.index');

Laravel – バリデーションエラー

2021-10-25 / tau / コメントする

概要

バリデーションの結果エラーが発生した場合、$errorsにメッセージ群が格納され、ビュー側でそれを参照できる。

全てのエラー

`$errors->all()`

$errorsは単なるコレクションではなくIlluminate\Support\MessageBagのインスタンス。ビューですべてのメッセージを一つずつ取り出すには例えば以下の様に記述する。

@foreach ($errors->all() as $error)
  <p>{{ $error }}</p>
@endforeach

@foreach ($errors->all() as $error)

<p>{{ $error }}</p>

@endforeach

たとえばフォームリクエストで以下のようなバリデーションルールを設定した場合。

class ItemRequest extends FormRequest
{
    ........
    public function rules()
    {
        return [
            'name' => ['required'],
            'price' => ['required', 'integer', 'min:0'],
            'image' => ['file', 'mimes:jpeg,jpg,png',
                        'dimensions:min_width=100,min_height=100,max_width=800,max_height=600'],
        ];
    }
}

class ItemRequest extends FormRequest

{

........

public function rules()

{

return [

'name' => ['required'],

'price' => ['required', 'integer', 'min:0'],

'image' => ['file', 'mimes:jpeg,jpg,png',

'dimensions:min_width=100,min_height=100,max_width=800,max_height=600'],

];

}

フォームで何も入力しないでPOSTすると、以下のエラーが表示される。

名前は必ず指定してください。

priceは必ず指定してください。

imageにはファイルを指定してください。

imageにはjpeg, jpg, pngタイプのファイルを指定してください。

imageの図形サイズが正しくありません。

名前は必ず指定してください。

priceは必ず指定してください。

imageにはファイルを指定してください。

imageにはjpeg, jpg, pngタイプのファイルを指定してください。

imageの図形サイズが正しくありません。

特定の項目のエラー

`$errors->has('項目名')`と`$errors->first('項目名')`

has()メソッドはフォームの入力項目名を指定して、それに対するエラーがあるかどうかを判定し、first()メソッドは入力項目に対するエラーのうち1つを得る。

これら2つを組み合わせて、特定項目のエラーを1つだけ表示させる例は以下の通り。

@if ($errors->has('image'))
  <p>{{ $errors->first('image') }}</p>
@endif

@if ($errors->has('image'))

<p>{{ $errors->first('image') }}</p>

@endif

先ほどの例では、imageの項目でファイルを選択しないと3つのエラーが表示されたが、この場合はそのうちの1つだけが表示される。

imageにはファイルを指定してください。

1	imageにはファイルを指定してください。

`$errors->get('項目名')`

get()メソッドは、指定した項目に関するすべてのエラーをコレクションで返す。先ほどの例で、imageに関するエラーだけを全て表示するには以下のように書く。

@foreach ($errors->get('image') as $error)
  <p>{{ $error }}</p>
@endforeach

@foreach ($errors->get('image') as $error)

<p>{{ $error }}</p>

@endforeach

ファイルを選択せずにPOSTすると、imageに関するバリデーションエラーがすべて表示される。

imageにはファイルを指定してください。

imageにはjpeg, jpg, pngタイプのファイルを指定してください。

imageの図形サイズが正しくありません。

imageにはファイルを指定してください。

imageにはjpeg, jpg, pngタイプのファイルを指定してください。

imageの図形サイズが正しくありません。

Laravel – アップロードファイルの削除

2021-10-22 / tau / コメントする

ファイル削除の流れ

Storageファサードでファイルを保存したディスクを指定して、delete()メソッドの引数にファイルパスを渡して削除を実行。

\Storage::disk('ディスク')->delete('ファイルパス');

1	\Storage::disk('ディスク')->delete('ファイルパス');

ディスクは保存時と同じものを指定
ファイルパスは保存時にstore()で得られた戻り値、データベースに登録しているパスをそのまま使う。

実装例

ビュー

storageに保存したファイルのURLで使ったビューに、画像削除のフォームとボタンを追加する。

ファイルが保存されパスがセットされていれば、hidden属性のinput要素でそのパスを渡している
画像削除ボタンを押すと/images/deleteへルーティング

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>画像選択</title>
  </head>
  <body>
    <h1>画像選択</h1>
    <form method="post" action="{{ route('images.store') }}" enctype="multipart/form-data">
      @csrf
      <input type="file" name="image">
      <input type="submit" value="登録">
    </form>

    {{-- バリデーションエラー表示 --}}
    @foreach ($errors->all() as $error)
      <p>{{ $error }}</p>
    @endforeach

    {{-- 画像ファイルのURLと画像を表示 --}}
    @isset ($path)
      <p>{{ $path }}</p>
      <p>{{ asset('storage/' . $path) }}</p>
      <p>{{ url('storage/' . $path) }}</p>
      <p>{{ \Storage::url($path) }}</p>
      <img src="{{ asset('storage/' . $path) }}">
      <img src="{{ url('storage/' . $path) }}">
      <img src="{{ \Storage::url($path) }}">
    @else
      <p>ファイルはアップロードされていません</p>
    @endisset

    {{-- 画像を削除 --}}
    <form method="post" action="/images/delete">
      @csrf
      <input type="hidden" name="path" value="{{ isset($path) ? $path : '' }}">
      <input type="submit" value="画像削除">
    </form>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

@csrf

</form>

@foreach ($errors->all() as $error)

<p>{{ $error }}</p>

@endforeach

@isset ($path)

<p>{{ asset('storage/' . $path) }}</p>

<p>{{ url('storage/' . $path) }}</p>

<p>{{ \Storage::url($path) }}</p>

@else

<p>ファイルはアップロードされていません</p>

@endisset

@csrf

</form>

</body>

</html>

ルーティング

ルーティングは以下のように設定。リソースベースだとURLにidを含めなければならないので、ここでは別途設定し、destroyアクションにルーティングしている。

Route::post('/images/delete', 'ImageController@destroy');

1	Route::post('/images/delete', 'ImageController@destroy');

コントローラー

storageに保存したファイルのURLで使ったコントローラーに、destroyアクションを追加する。

フォームのhidden属性のinput要素からパスを取得
パスがセットされていれば削除を実行
indexページにリダイレクト

class ImageController extends Controller
{
    ........
    public function destroy(ImageRequest $request) {
        $path = $request->path;
        if (isset($path)) {
            \Storage::disk('public')->delete($path);
        }

        return redirect()->route('images.index');
    }
}

class ImageController extends Controller

{

........

public function destroy(ImageRequest $request) {

$path = $request->path;

if (isset($path)) {

\Storage::disk('public')->delete($path);

}

return redirect()->route('images.index');

}

Laravel – storageに保存したファイルのURL

2021-10-21 / tau / コメントする

概要

たとえば保存されたアップロードファイルなど、storageディレクトリー下に保存したファイルのパスを取得する手順を整理する。

storage/app/public直下またはそのサブディレクトリー下に保存されたファイルを対象とする
artisanにより、storage/app/publicへのシンボリックリンクstorageをpublicディレクトリー下に作成
publicディレクトリー内は公開されるので、以下のいずれかの方法でURLを取得
- asset()ヘルパーやurl()ヘルパーの引数に'storage/' . $pathを与えてURLを取得
- \Storage::url()の引数に$pathを与えてドキュメントルート以下のパスを取得

公開領域

Laravelのファイルの公開場所は以下の様になっている。

publicディレクトリー下のファイル、あるいはそのサブディレクトリー下のファイルは公開対象
URLでの指定方法は、publicディレクトリー下のディレクトリー・ファイル構成をドメイン名に続けて指定

たとえば以下の例では、publicディレクトリー下にサブディレクトリーtestがあって、その下にbar.txtファイルがある。

$ cat public/foo/bar.txt
サンプルテキスト

1 2	$ cat public/foo/bar.txt サンプルテキスト

このファイルは公開されていて、このアプリケーションをlocalhostで確認する場合、ブラウザーで以下のようなURLを指定するとファイルの内容がブラウザーに表示される。

localhost:3000/foo/bar.txt

1	localhost:3000/foo/bar.txt

storage下のファイルの公開

以下のコマンドを実行すると公開領域にシンボリックリンクstorageが作成され、それがstorage/app/publicディレクトリーを指す。

php artisan storage:link

1	php artisan storage:link

publicディレクトリー下にシンボリックリンクstorageが作成される
リンクstorageはstorage/app/publicを指す
ディレクトリー下にアクセスするURLは以下のとおり
- ドメイン名/storage/....

$ php artisan storage:link
The [public/storage] directory has been linked.
$ ls -Al public
合計 16
-rw-rw-r--. 1 vagrant vagrant  593  9月  7 20:19 .htaccess
-rw-rw-r--. 1 vagrant vagrant    0  9月  7 20:19 favicon.ico
-rw-rw-r--. 1 vagrant vagrant 1823  9月  7 20:19 index.php
-rw-rw-r--. 1 vagrant vagrant   24  9月  7 20:19 robots.txt
lrwxrwxrwx. 1 vagrant vagrant   70 10月 21 21:15 storage -> /home/..../アプリケーション/storage/app/public
-rw-rw-r--. 1 vagrant vagrant 1194  9月  7 20:19 web.config

$ php artisan storage:link

The [public/storage] directory has been linked.

$ ls -Al public

合計 16

-rw-rw-r--. 1 vagrant vagrant 593 9月 7 20:19 .htaccess

-rw-rw-r--. 1 vagrant vagrant 0 9月 7 20:19 favicon.ico

-rw-rw-r--. 1 vagrant vagrant 1823 9月 7 20:19 index.php

-rw-rw-r--. 1 vagrant vagrant 24 9月 7 20:19 robots.txt

lrwxrwxrwx. 1 vagrant vagrant 70 10月 21 21:15 storage -> /home/..../アプリケーション/storage/app/public

-rw-rw-r--. 1 vagrant vagrant 1194 9月 7 20:19 web.config

たとえばアプリケーションがlocalhostで稼働している場合、storage/app/public/foo/bar.pngにアクセスするURLは以下のとおり。

localhost:3000/storage/foo/bar.png

1	localhost:3000/storage/foo/bar.png

画像ファイルを表示する例

コントローラー

アップロードファイルの保存で保存された画像ファイルを表示させる例を示す。

画像ファイルをフォームで選択してPOSTすると、コントローラーのstoreアクションにルーティングされるとする。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests\ImageRequest;

class ImageController extends Controller
{
    public function index() {
        return view('images.index');
    }

    public function store(ImageRequest $request) {
        // 一時保存されたUploadedFileの取得
        $image = $request->file('image');
        // ファイルの保存と保存されたファイルのパス取得
        $path = '';
        if (isset($image)) {
            $path = $image->store('images', 'public');
        }

        return view('images.index', ['path' => $path]);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests\ImageRequest;

class ImageController extends Controller

{

public function index() {

return view('images.index');

}

public function store(ImageRequest $request) {

// 一時保存されたUploadedFileの取得

$image = $request->file('image');

// ファイルの保存と保存されたファイルのパス取得

$path = '';

if (isset($image)) {

$path = $image->store('images', 'public');

}

return view('images.index', ['path' => $path]);

}

コントローラーの処理は以下の通り。

storeアクションで、フォームリクエストからファイルオブジェクトを取得
画像ファイル本体をpublicディスクのimagesディレクトリーに保存
その際、ランダム文字列で生成されるファイル名が戻り値となり、これを$pathに保存
$pathを渡してimages.indexビューをレンダリング

ビュー

ページを表示するテンプレートは以下の通り。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>画像選択</title>
  </head>
  <body>
    <h1>画像選択</h1>
    <form method="post" action="{{ route('images.store') }}" enctype="multipart/form-data">
      @csrf
      <input type="file" name="image">
      <input type="submit" value="登録">
    </form>

    {{-- バリデーションエラー表示 --}}
    @foreach ($errors->all() as $error)
      <p>{{ $error }}</p>
    @endforeach

    {{-- 画像ファイルのURLと画像を表示 --}}
    @isset ($path)
      <p>{{ $path }}</p>
      <p>{{ asset('storage/' . $path) }}</p>
      <p>{{ url('storage/' . $path) }}</p>
      <p>{{ \Storage::url($path) }}</p>
      <img src="{{ asset('storage/' . $path) }}">
      <img src="{{ url('storage/' . $path) }}">
      <img src="{{ \Storage::url($path) }}">
    @else
      <p>ファイルはアップロードされていません</p>
    @endisset
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

@csrf

</form>

@foreach ($errors->all() as $error)

<p>{{ $error }}</p>

@endforeach

@isset ($path)

<p>{{ asset('storage/' . $path) }}</p>

<p>{{ url('storage/' . $path) }}</p>

<p>{{ \Storage::url($path) }}</p>

@else

<p>ファイルはアップロードされていません</p>

@endisset

</body>

</html>

ファイル関係の表示は後ろの方で、$pathの内容とasset()、url()2つのヘルパーの結果を表示し、ヘルパーで生成されたURLで画像を表示させている。

$pathの内容

画像ファイルを保存した後の$pathの内容は以下の通りで、storeアクションでの処理により、images/ランダム文字列によるファイル名となっている(拡張子はそのまま)。

images/kn2NdjJUL9k20kE0xLhmTwAZcFycySvLcFcLkybz.jpg

1	images/kn2NdjJUL9k20kE0xLhmTwAZcFycySvLcFcLkybz.jpg

asset(), url()によるURL

ファイルは公開領域のstorageディレクトリーから参照されるが、そのURLはasset()、url()の何れでも同じ結果を与える。

http://localhost:3000/storage/images/kn2NdjJUL9k20kE0xLhmTwAZcFycySvLcFcLkybz.jpg
http://localhost:3000/storage/images/kn2NdjJUL9k20kE0xLhmTwAZcFycySvLcFcLkybz.jpg

1 2	http://localhost:3000/storage/images/kn2NdjJUL9k20kE0xLhmTwAZcFycySvLcFcLkybz.jpg http://localhost:3000/storage/images/kn2NdjJUL9k20kE0xLhmTwAZcFycySvLcFcLkybz.jpg

\Storage::url()によるドキュメントルート下のパス

\Storageファサードのurl()メソッドに$pathを指定すると、ドキュメントルート下の画像ファイルのパスが得られる。

/storage/images/Sa6Oicpvoma4j53WCbZcyaICusRvxYzwZvhNBMX4.jpg

1	/storage/images/Sa6Oicpvoma4j53WCbZcyaICusRvxYzwZvhNBMX4.jpg

img要素のsrcの指定

先のビューでは、asset()、url()、\Storage::url()の結果をimg要素のsrcの値に指定していて、いずれも同じ画像が表示される。

概要

値を渡して値を受け取る

ルーティング

ビューでの渡し方

コントローラーでの受け取り方

モデルのインスタンスのまま渡して受け取る

ルーティング

ビューでの渡し方

コントローラーでの受け取り方

概要

ファイルの削除手順

データの変更

ルーティング

ビューからのリンク～index.blade.php

コントローラー～edit

ビュー～edit.blade.php

コントローラー～update

データの削除

ルーティング

ビューへの削除ボタン配置～index.blade.php

コントローラー～destroy

概要

publicディスクへのリンク作成

コントローラー～index

ビュー～index.blade.php

概要

コントローラー～store

データ登録確認

概要

ルーティング

商品入力ページ～index.blade.php

フォームリクエスト

コントローラー～index/store

データ登録確認

概要

準備

仕様

モデルとコントローラーの作成

ルーティング

マイグレーション

マイグレーションファイルの編集

マイグレーション

アップロード画像処理の実装

実装の流れ

入力・アップロード

アップロード画像の保存・登録

アップロード画像の表示

アップロード画像の変更・削除

概要

view()

redirect()

概要

全てのエラー

$errors->all()

特定の項目のエラー

$errors->has('項目名')と$errors->first('項目名')

$errors->get('項目名')

ファイル削除の流れ

実装例

ビュー

ルーティング

コントローラー

概要

公開領域

storage下のファイルの公開

画像ファイルを表示する例

コントローラー

ビュー

$pathの内容

asset(), url()によるURL

\Storage::url()によるドキュメントルート下のパス

img要素のsrcの指定

`$errors->all()`

`$errors->has('項目名')`と`$errors->first('項目名')`

`$errors->get('項目名')`