Laravel webアプリケーション作成part2 CRUD操作/ログイン機能

Laravel webアプリケーション作成part1 プロジェクト作成〜ブラウザ表示
からの続きです。
https://qiita.com/machiryu/items/d8f7908a3d07f5c35f17

ログイン機能実装

$ composer require laravel/ui
Using version ^3.2 for laravel/ui
(省略)
Package manifest generated successfully.
74 packages you are using are looking for funding.
Use the `composer fund` command to find out more!

$ php artisan ui vue --auth
Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

 The [layouts/app.blade.php] view already exists. Do you want to replace it? (yes/no) [no]:
 と聞かれるので、yes。
 > yes

Authentication scaffolding generated successfully.
[machidaryo CombiOkashi]$ php artisan serve
Starting Laravel development server: http://127.0.0.1:8000

php artisan serveでサーバ起動しブラウザで確認すると、
Login,Registerが表示される。
がレイアウトいまいち。

レイアウトを整える。上のコマンド実行時に
Please run "npm install && npm run dev" to compile your fresh scaffolding.と表示されていたので、そうする。

Vue,Angular,React(フレームワーク)のインストールということ。

$ npm install
(省略)
   ╭───────────────────────────────────────────────────────────────╮
   │                                                               │
   │      New major version of npm available! 6.14.10 → 7.5.3      │
   │   Changelog: https://github.com/npm/cli/releases/tag/v7.5.3   │
   │               Run npm install -g npm to update!               │
   │                                                               │
   ╰───────────────────────────────────────────────────────────────╯

と出たので、npm install -g npmを実行してみる。

が、うまくいかなかったので、次の実行コマンドを実行してみた。

$ npm run dev

> @ dev /Users/machidaryo/phpstudy202012/CombiOkashi
> npm run development

> @ development /Users/machidaryo/phpstudy202012/CombiOkashi
> mix

    Additional dependencies must be installed. This will only take a moment.
    Running: npm install vue-loader@^15.9.5 --save-dev --legacy-peer-deps
    Finished. Please run Mix again.

エラー。調べてみると、Laravel Mixとういやつをアップグレードしたらいけそうという記事があったので、
npm install laravel-mixをして、再度runするといけた。

$ npm run dev
(省略)
99% done plugins BuildOutputPlugin

   Laravel Mix v6.0.11

✔ Compiled Successfully in 6941ms
┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬─────────┐
│                                                                                                                                             File │ Size    │
├──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼─────────┤
│                                                                                                                                       /js/app.js │ 1.4 MiB │
│                                                                                                                                      css/app.css │ 179 KiB │
└──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴─────────┘

デザインがいい感じに。ヘッダー右部分にLogin,Registerボタンが現れた。

Login画面

Resistar画面（ユーザー登録画面）

マイページを作成する

mypage.blade.php

views\okashisの下に作成。

routesを修正

routes\web.php

(省略)
Route::get('/mypage', [App\Http\Controllers\OkashiController::class, 'mypage'])->name('mypage');

Controllerを修正

Http\Controllers\OkashiController.php

(省略)
public function mypage() {
   $okashis = Okashi::all();
   return view('okashis.mypage', ['okashis' => $okashis]);
}

エラー

mypage.blade.phpのviewで@endforeachが抜けてた。凡ミス。修正。
mypage表示成功。

ヘッダーにマイページボタンをつける。

views\layouts\app.blade.php

@guest
  (省略)
@else
  #この３行を追加。
  <li class="nav-item">
    <a class="nav-link" href="{{ route('mypage') }}">マイページ</a>
  </li>
　(省略)
@endguest

登録画面を作る create,store

ちなみに、
create：マイページから遷移して、新規登録画面を表示のみ
store：新規登録処理
edit：マイページ一覧から遷移して、修正画面を表示のみ
update：更新処理
destroy：削除処理（削除ボタンはマイページ一覧に表示）

routes修正

Route::resource('okashis', OkashiController::class);を追加。

view作成

create.blade.phpを作成。

マイページ内にリンクを貼る

<a href="{{ route('okashis.create') }}">組み合わせ登録</a>を追加。

登録処理を作る store

APP\Http\Controllers\OkashiController.php

(省略)
public function store(Request $request) {
      $okashi = new Okashi;
      $okashi->name1 = $request->name1;
      $okashi->name2 = $request->name2;
      $okashi->user_id =Auth::user()->id;
      $okashi->save();
      return redirect()->route('okashis.mypage');
    }

登録ボタンを押すとうまくいかず。

クロスサイトリクエストフォージェリ対策が必要だった。

クロスサイトリクエストフォージェリ（CSRF）とは、Webアプリケーションに存在する脆弱性、もしくはその脆弱性を利用した攻撃方法のことです。掲示板や問い合わせフォームなどを処理するWebアプリケーションが、本来拒否すべき他サイトからのリクエストを受信し処理してしまいます。

@csrfをviewのform内に入れる。

resources\views\okashis\create.blade.php

(省略)
  　</div>
  @csrf
  </form>

次のエラー。

ログインユーザー情報をControllerで使うには、
use Illuminate\Support\Facades\Auth;が必要だった。

次のエラー。

他の項目がNULLなのが問題っぽい、ので仮で入れる。

次のエラー。

これが必要だった。

APP\Http\Controllers\OkashiController.php

public function store(Request $request) {
      (省略)
      # return redirect()->route('okashis.mypage');
      $okashis = Okashi::all();
      return view('okashis.mypage', ['okashis' => $okashis]);
    }

できた。

edit,update

edit：マイページ一覧から遷移して、修正画面を表示のみ
update：更新処理

edit

マイページにedit画面へのリンクを追加。

resources\views\okashis\mypage.blade.php

<a href="{{ route('okashis.edit', $okashi->id) }}">変更</a>

create.blade.phpをコピーして作成し、form部分を少し変更。

resources\views\okashis\edit.blade.php

<form action="/okashis/{{ $okashi->id }}" method="POST" class="form-horizontal">
  @method('PUT')

対象のデータが表示されない。

editビューのinputタグのvalueを修正する。

resources\views\okashis\edit.blade.php

（省略）
  <input type="text" name="name1" id="name1" class="form-control" value="{{ old('name1', $okashi->name1) }}">
（省略）
<input type="text" name="name2" id="name2" class="form-control" value="{{ old('name2', $okashi->name2) }}">

表示された。

update

controllerにstoreとほぼ同じように記述する。

APP\Http\Controllers\OkashiController.php

    public function update(Request $request, $id) {
      $okashi = Okashi::find($id);
      $okashi->name1 = $request->name1;
      $okashi->name2 = $request->name2;
      $okashi->save();
      $okashis = Okashi::all();
      return view('okashis.mypage', ['okashis' => $okashis]);
    }

できた。

destroy

controllerに記述。

APP\Http\Controllers\OkashiController.php

    public function destroy($id) {
      $okashi = Okashi::find($id);
      $okashi->delete();
      $okashis = Okashi::all();
      return view('okashis.mypage', ['okashis' => $okashis]);
    }

mypageビューにformを仕込む。

resources\views\okashis\mypage.blade.php

（省略）
        <form action="{{ route('okashis.destroy', $okashi->id) }}" method="POST">
          @method('DELETE')
          @csrf
          <button type="submit">削除</button>
        </form>

できた！

他の項目も表示する

taset,price,surprice：☆×5で表示する
comment：そのまま

星評価をfunctionにしたのと、ビューに仕込んだ。

# Okashi.php
    public function starEva($star) {
        for ($i = 0; $i < 5; $i++) {
            if ($star > $i) :
                echo '<i class="fas fa-star">★</i>';
            else :
                echo '<i class="far fa-star">☆</i>';
            endif;
        }
    }

# mypage.blade.php
       味：{{ $okashi->starEva($okashi->taste) }}
        値段：{{ $okashi->starEva($okashi->price) }}
        驚き：{{ $okashi->starEva($okashi->surprice) }}
        {{ $okashi->comment }}

# index.blade.php
　　　　上と同じ

いい感じに。

合わせて、create,storeとedit,updateも上記項目を表示、動作できるようにした。

おまけで、投稿を降順に。index,mypageページ共に。

# web.php
 # なぜかindexはroute側で効いていた。のでそちらを修正。
Route::get('/', function () {
    # $okashis = Okashi::all();
    $okashis = Okashi::orderBy('id', 'desc')->get();
    return view('okashis.index', ['okashis' => $okashis]);
});

# OkashiController
 # orderByを追加
    public function mypage() {
       # $okashis = Okashi::all()->where('user_id', Auth::id());
       $okashis = Okashi::orderBy('id', 'desc')->get()->where('user_id', Auth::id());
       return view('okashis.mypage', ['okashis' => $okashis]);
    }

マイページを自分の投稿のみにする

controllerのmypageを修正。

APP\Http\Controllers\OkashiController.php

    public function mypage() {
       # $okashis = Okashi::all();
       $okashis = Okashi::all()->where('user_id', Auth::id()); # 自分の投稿のみに
       return view('okashis.mypage', ['okashis' => $okashis]);
    }

TOPページに投稿者名も表示する

リレーションを設定する。
modelを修正。
userは単数形、okashisは複数形にするのがポイント。

# Okashi.php
    public function user() {
        return $this->belongsTo('App\Models\User');
    }
# User.php
    public function okashis() {
        return $this->hasMany('App\Models\Okashi');
    }

mypageビューを修正

できた。

img1,2を画像にする

まずはedit,updateに実装

edit修正。
enctype="multipart/form-data"をformタグに追加。

update修正。

APP\Http\Controllers\OkashiController.php

public function update(Request $request, $id) {

      if ($file = $request->img1) {
         $fileName1 = time() . $file->getClientOriginalName();
         $target_path = public_path('uploads/');
         $file->move($target_path, $fileName1);
      }else {
         $fileName1 = "";
      }
      if ($file = $request->img2) {
         $fileName2 = time() . $file->getClientOriginalName();
         $target_path = public_path('uploads/');
         $file->move($target_path, $fileName2);
      }else {
         $fileName2 = "";
      }

      $okashi = Okashi::find($id);
      $okashi->img1 = $fileName1;
      $okashi->img2 = $fileName2;
（省略）
}

変更画面に画像登録ボタンが表示された。

登録と当時に、public\uploadsフォルダが自動で作成された。
シンボリックリンクをこのフォルダに貼る必要があるらしい。でないと、アクセスできず表示できない。

$ php artisan storage:link

The [/Users/machidaryo/phpstudy202012/CombiOkashi/public/storage] link has been connected to [/Users/machidaryo/phpstudy202012/CombiOkashi/storage/app/public].
The links have been created.

表示できるようにmypageを修正。

# mypage.blade.php
<img src="../../uploads/{{ $okashi->img1 }}" width="100px" height="100px">
<img src="../../uploads/{{ $okashi->img2 }}" width="100px" height="100px">

見栄えは悪いが一応表示できた。

create,storeも同じく

indexページも同じように表示修正で、できた。

おわり

次は、フロント整えていく。
いいね機能もつけたい。Ajaxか？

参考
https://qiita.com/apricotcomic/items/07f172a957c1f342fd91
https://qiita.com/ryo-program/items/35bbe8fc3c5da1993366