S3にアップロードしてmysqlに登録

やりたいこと
– Laravelから画像をS3にアップロードしてmysqlにパスを登録

-> その為には？
– ブレークダウンして考える
– まず、s3に画像をアップロード
– その後、ユーザID、s3のバケットのパス、ファイル名、ファイルサイズ、ステータスをmysqlに登録する
– ユーザIDに紐づいた画像を画像管理の画面で表示させる

アップロードのHTML、JSまではできている。

<form action="#" method="POST" enctype="multipart/form-data">
        <div id="drag-drop-area">
         <div class="drag-drop-inside">
          <p class="drag-drop-info">ここにファイルをアップロード</p>
          <p>または</p>
          <!-- <input type="file" value="ファイルを選択" name="image"> -->
          <p class="drag-drop-buttons"><input id="fileInput" type="file" value="ファイルを選択" name="image"></p>
              <!-- <input type="submit" value="送信"> -->
           </div>
          </div>
            

      <div class="button_wrapper remodal-bg">
        　<button type="submit" value="送信" id="square_btn" onClick="location.href='#modal'">登録</button>
      </div>
       </form>

ログイン機能は後から作ろうかなと悠著に考えていたが、先に作った方が良いのかな。。
まずは、S3へのアップロードからやりましょう。

ヘッダー(header)を最前面に表示するz-index

プルダウン式のheaderを作っていたのですが、
おいおいおい、なんだこれは、ヘッダーよりもstepのボックスの方が全面に表示されているじゃないか。
ピッツバーグ美術館に飾られているモダンアートみたいになってるぞ。

ヘッダーのプルダウンを最前面に表示したいとき。

cssでz-indexを指定する

mozillaを見てみましょう。
Z-index
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

z-indexの値が大きい方が全面に表示されます。下記例だとgoldが最前面です。

では実際にやってみましょう。
stepの該当箇所　z-indexの値を0にします。

.step {
  list-style-type: none;
  display:table;
  width:100%;
  height:50px;
  padding: 0;
  margin: 0;
  overflow:hidden;
  z-index: 0;
}

navigationのcss, z-indexを1にします。

#gNav {
	position: absolute;
	margin-top: 40px;
	float: left;
	width: 100%;
	height:45px;
	background-color: #6a5acd;
	z-index: 1;
}

おいおい、沖縄みたいに浮いてるぞ。

stepを全てz-index:0に変えます。

li.is-current{
	z-index:0;
}

上手く表示されるようになりました。

Laravel フォーム・確認画面の「戻る」ボタンの処理実装

confirm.blad.php

<div class="button_wrapper remodal-bg">
         <button type="submit" value="送信" id="square_btn" onClick="location.href='#modal'">登録</button>
      </div>

「戻る」ボタンを追加する。

<div class="button_wrapper remodal-bg">
        　<button id="square_btn" onClick="history.back()">戻る</button>
         <button type="submit" value="送信" id="square_btn" onClick="location.href='#modal'">登録</button>
      </div>

あれ！？onclickのhistory.back()だとエラーになるな。。何故？？

やりなおします。
「戻る」ボタンのvalueを”back”として、一度、controllerにpostします。

<div class="button_wrapper remodal-bg">
        　<button type="submit" name="action" id="square_btn" value="back">戻る</button>
         <button type="submit" name="action" value="送信" id="square_btn" onClick="location.href='#modal'">登録</button>
      </div>

controllerでbackを受けた場合は、AccountInputControllerにリダイレクトさせます。

public function store(Request $request){

        $action = $request->get('action', 'back');
        $input = $request->except('action');

        if($action == 'back'){
            return redirect()->action('AccountInputController@input')
->withInput($input);
        } else {

        $account = new Account([
        'login_id' => $request->get('login_id'),
        hogehoge // 省略
        ]);
        $account->save();
        return view('account');

        }

    	
    }

これだと値が保持されたまま、入力画面に戻ります^^
うむ、なかなか簡単には行かせてくれないな。

### Laravelの学習になぞっておきたい本

laravel5.7 radioボタンのbladeでswitch文を使う

入力フォーム radioボタンで、値(value)にintを入れる。

<td>
            <input type="radio" name="role" size="40" value="1" v-model="message" checked> 管理者
            <input type="radio" name="role" size="40" value="2" <?php if( old('role')  == 2){ echo "checked";} ?> v-model="message"> 管理者2
            <input type="radio" name="role" size="40" value="3" <?php if( old('role')  == 3){ echo "checked";} ?> v-model="message"> 管理者3
            <input type="radio" name="role" size="40" value="4" <?php if( old('role')  == 4){ echo "checked";} ?> v-model="message">　管理者4
            <input type="radio" name="role" size="40" value="5" <?php if( old('role')  == 5){ echo "checked";} ?> v-

確認画面でvalueを受ける際に、intを受けると、そのまま1～5の数字が表示されてしまう。

<tr>
          <th>権限</th>
          <td>
            {{$confirm->role}}
          </td>
        </tr>

oh my god

switch文でテキストに変換する。switch文は特にlaravelは関係ない。普通にphpで使えばよい。

<tr>
          <th>権限</th>
          <td>
            <?php
              switch ($confirm->role){
                  case '1':
                  echo "管理者1";
                  break;
                  case '2':
                  echo "管理者2";
                  break;
                  case '3':
                  echo "管理者3";
                  break;
                  case '4':
                  echo "管理者4";
                  break;
                  case '5':
                  echo "管理者5";
                  break;
              }
            ?>
            <!-- {{$confirm->role}} -->
          </td>

view

決まった

laravel5.7 ラジオボタン(radio)のinputform

view.blade.php
フォームで、radioボタンの値を渡したい。
最初、なにを土地狂ったのか以下のように書いていた。上手く値が渡らない。なぜなら、valueがnullだから。

<td>
            <input type="radio" name="role" size="40" value="{{ old('role') }}" v-model="message" checked> 管理者1
            <input type="radio" name="role" size="40" value="{{ old('role') }}" v-model="message"> 管理者2
            <input type="radio" name="role" size="40" value="{{ old('role') }}" v-model="message"> 管理者3
            <input type="radio" name="role" size="40" value="{{ old('role') }}" v-model="message">　管理者4
            <input type="radio" name="role" size="40" value="{{ old('role') }}" v-model="message"> 管理者5
          </td>

ちゃうねん、radioボタンなので、valueは指定しないと駄目。
で、error時にはカスタムバリエーションから戻ってくるので、if文で、old(‘role’)が2の時は、checkedとすれば良い。

<td>
            <input type="radio" name="role" size="40" value="1" v-model="message" checked> 管理者
            <input type="radio" name="role" size="40" value="2" <?php if( old('role')  == 2){ echo "checked";} ?> v-model="message"> 管理者2
            <input type="radio" name="role" size="40" value="3" <?php if( old('role')  == 3){ echo "checked";} ?> v-model="message"> 管理者3
            <input type="radio" name="role" size="40" value="4" <?php if( old('role')  == 4){ echo "checked";} ?> v-model="message">　管理者4
            <input type="radio" name="role" size="40" value="5" <?php if( old('role')  == 5){ echo "checked";} ?> v-model="message"> 管理者5
          </td>

決まった

あれ、ちょっとまてよ。確認画面で、radioボタンのvalueを以下の様に渡すと、

<tr>
          <th>権限</th>
          <td>
            {{$confirm->role}}
          </td>
        </tr>

おいおい、権限 “2” ってなんだよw

これはswitch文か？

laravel5.7のバリデーションで複数条件を設定する

required以外のバリデーションを追加したい。
ログインIDは半角英数字
メールアドレス: 半角英数字、@

$validatedData = $request->validate([
        'title' => 'required|unique:posts|max:255',
        'body' => 'required',
    ]);

requiredのほかに、unique:posts, max:255などがあります。
bail：最初のバリデーションに失敗したら、残りのバリデーションルールの判定を停止

埒が明かないので、公式サイトをみます。
validation

色々ありますね。正規表現があるなら、全部それでよさそうではあります。

半角英数字っぽいのは二つあります。

alpha_dash
フィールドが全部アルファベット文字と数字、ダッシュ(-)、下線(_)であることをバリデートします。

alpha_num
フィールドが全部アルファベット文字と数字であることをバリデートします。

ログインidなので、ダッシュ、下線が入る可能性があるので、alpha_dashでしょうか？

mailアドレスは[email]というメソッドがありました。ほう。

email
フィールドがメールアドレスとして正しいことをバリデートします

では、カスタムバリエーションを編集していきます。

public function rules()
    {
        return [
            'login_id' => 'required|alpha_dash',
        ];
    }
    public function messages()
    {
        return [
            'login_id.required' => 'ログインIDを入力してください',
            'login_id.alpha_dash' => '半角英数字、数字、ダッシュ(-)、下線(_)いずれかで作成してください',

        ];
    }

あれ、上手くいかない。何故だ？
alpha_dashが日本語でも通してしまう!!!!!!!!!!!!!!
なにいいいいいい？

ということで変更します。

'login_id' => 'required|regex:/^[a-zA-Z0-9-]+$/',

おおおおおおおおおおおおお　sugeeeeeeeeeeee

emailもついでに

'mail_address' => 'required|email',

OKOK

アラートメッセージのCSS

バリデーションメッセージのフォントカラーを変えたい。
まず、参考サイトとして、netflixのソースコードを見てみます。

<div id="" class="inputError">有&#65279;効&#65279;なメ&#65279;ー&#65279;ルア&#65279;ド&#65279;レ&#65279;スま&#65279;た&#65279;は電&#65279;話番&#65279;号&#65279;を入&#65279;力し&#65279;てく&#65279;ださ&#65279;い&#65279;。</div>

div.class で inputErrorとしてますね。なるほど。

laravelのbladeに inputErrorを追加します。

<table id="tbl">
        @csrf        
        <tr>
          <th>会社名</th><td><input type="text" name="company_name" size="40"  value="{{ old('company_name') }}"><div class="inputError">{{$errors->first('company_name')}}</div></td>
        </tr>
        <tr>
          <th>代理店</th><td><input type="text" name="agent_name" size="40"  value="{{ old('agent_name') }}"><div class="inputError">{{$errors->first('agent_name')}}</div></td>
        </tr>
      </table>

cssにinputErrorを追加します。
main.css

.inputError {
	color:red;
}

バリデーションメッセージのフォントカラーが変わりました。割と普通だ。

Laravel5.7 403エラー forbiddenが出た時

local laravelで開発していて

403
sorry, you are forbidden to access this page.

forbidden　って、読んで字のごとく、禁止されているって意味。なんだろうこれは？
– DNS設定していない
– サーバーから制限
– パーミッション(権限・属性)の設定ミス
– .htaccessの設定ミス
– サーバー側の障害
– WAF設定

ローカル, artisanで開発しているので、サーバ側が原因とは考えにくい。routing(web.php)か？

あ！？

custom requestのauthorizedがfalseのままだった。

公式のドキュメントにも記載がありますね。
https://readouble.com/laravel/5.5/ja/validation.html
>authorizeメソッドがfalseを返すと、403ステータスコードのHTTPレスポンスが自動的に返され、コントローラメソッドは実行されません。

public function authorize()
    {
        return true;
    }

trueに変更すると、403が消えました。
簡単ね

### 1冊やっておいても損はない本

.travis.ymlの書き方

travis.ymlの公式です。必ず公式を見るようにします。
https://docs.travis-ci.com/user/customizing-the-build/

1. 言語を指定
phpを指定します。

language: php

2. 指定する言語のバージョン
5.6以上を指定します。

php:
  - 5.6
  - 7.0
  - 7.1
  - 7.2
  - 7.3
  - nightly

3. matrixで並列に回す

matrix:
  fast_finish: true
  allow_failures:
    - php: nightly

4. 実行するコードを書く

before_install:
  - travis_retry composer self-update

install:
  - travis_retry composer require --no-update satooshi/php-coveralls:^1.0
  - travis_retry composer install --no-interaction --prefer-source

before_script:
  - mkdir -p build/logs

script:
  - ./vendor/bin/parallel-lint src test
  - ./vendor/bin/phpunit --verbose --coverage-clover build/logs/clover.xml
  - ./vendor/bin/phpcs src --standard=psr2 -sp

after_success:
  - travis_retry php vendor/bin/coveralls

wireframe cc　日本語文字化け

wireframe ccを使って、ワイヤー書いたのはいいんだけど、エクスポートしようとすると、日本語が、文字化けする。

ああああああ、きっついなー
exportする際に、pngとpdfが選べるんだが、どちらも文字化けする。。

settingで文字コードの指定がないし、おそらく日本語には対応していなんだろう。
うーん、困った。

しょうがない、ctr + [-] で縮小して画面キャプチャしかない。。
教訓: 海外のデザインツール/モック作成ツールを使用する際は、文字コードに気を付けろ(涙目)