Laravelでプレビュー画面

Laravelでプレビュー画面の作成方法

基本的には入力内容をshow用のviewに渡すだけ。

コーディング例

編集画面view

更新ボタンとプレビューボタンを準備。 プレビューは別タブに表示する。

<button name="action" value="preview" onclick="this.form.target='_blank'">プレビュー</button>
<button name="action" value="update" pnclick="this.form.target='_top'">更新</button>

controller

$request->actionがpreviewの場合はプレビュー画面を表示 そうでなければ更新処理

$user = User::find($id);
if ($request->action === 'preview') {
    return view('show', [
        'user' => $user->fill($request->all()),
        'previewPosts' => Post::whereIn('id', $request->post_ids)->get(),
        'previewPhoto' => $request->file('photo'),
    ]);
}
// 更新処理

show画面view

userはそのまま 子オブジェクト、画像は場合分け

{{ $user->name }}
@foreach($previewPosts ?? $user->posts as $post}}
  {{--  --}}
@endforeach
@if(isset($previewPhoto))
  <img src="data:{{ $previewPhoto->getMimeType() }}:base64,{{ file_get_contents($previewPhoto) }}">
@else
  {{-- 通常時の表示 --}}
@endif

Vue.jsを使った生年月日データの整形

1.生年月日のフォームが「年」「月」「日」で分かれている場合に、送信するリクエストではyyyy-mm-ddにする

概要：送信用のhiddenのinputを用意し、submitボタンにイベントを設け、yyyy-mm-ddの形に繋げたものを用意したhiddenのinputに格納する。

blade（該当箇所抜粋）

<div id="app">
  <form>
    <input type="hidden" name="birthday_date" v-model="birthday.date" />
    <input type="text" v-model="birthday.year" />
    <select v-model="birthday.month">
      @for($month = 1; $month <= 12; $month++)
        <option value="{{ $month }}">{{ $month }}</option>
      @endfor
    </select>
    <select v-model="birthday_day">
      @for($day = 1; $day <= 31; $day++)
        <option value="{{ $day }}">{{ $day }}</option>
      @endfor
    </select>
    <button type="submit" @click="formatBithday">更新</button>
  </form>
</div>

Vue.js（該当箇所抜粋）

new Vue({
  el: '#app',
  data: {
    birthday: {
      date: '',
      year: '',
      month: '',
      day: ''
    }
  }
  methods: {
    formatBithday: function () {
      if (this.birthday.year || this.birthday.month || this.birthday.date) {
        this.birthday.date = `${this.birthday.year}-${this.birthday.month}-${this.birthday.day}`;
      }
    }
  }
});

2.yyyy-mm-ddで送られてきた際にこれを分割して自動的に入力させる方法

概要：createを使ってフォーム画面にアクセスしたタイミングで自動入力

blade（該当箇所抜粋）

<div id="app">
  <form>
    <input type="hidden" name="birthday_date" id="birthday_date" v-model="birthday.date" />
    <input type="text" v-model="birthday.year" />
    <select v-model="birthday.month">
      @for($month = 1; $month <= 12; $month++)
        <option value="{{ $month }}">{{ $month }}</option>
      @endfor
    </select>
    <select v-model="birthday_day">
      @for($day = 1; $day <= 31; $day++)
        <option value="{{ $day }}">{{ $day }}</option>
      @endfor
    </select>
  </form>
</div>

Vue.js（該当箇所抜粋）

new Vue({
  el: '#app',
  data: {
    birthday: {
      date: '',
      year: '',
      month: '',
      day: ''
    }
  },
  created: function () {
    const birthdayDate = $("#birthday_date").val().split('-');
    // 本当はthis.birthday.dateで取り出したいがこのタイミングでは値が入ってないためやむなくjQueryを使用。
    this.birthday.year = birthdayDate[0];
    this.birthday.month = birthdayDate[1];
    this.birthday.day = birthdayDate[2];
  }
});

はじめまして

はじめまして。ここではtoonと名乗ることにします。 仕事はWEBアプリケーションを開発するSE及びそれを売る営業をやっています。

ブログを書こうと思ったのは、最近仕事で覚えることが多く、振り返りが必要と感じ、その方法としてブログを選んでみました。

最近使っている技術としては、PHPのフレームワークであるLaravel、及びJavaScriptのフレームワークであるVue.jsです。しばらくはこの2つに関する記事が中心になるかと思います。

また、一時期雀荘のメンバー（店員）をやっていたこともあり、麻雀が好きで、毎週のように麻雀をやっています。その成績や考察もあれば、書いていこうと思います。