Upload image with Laravel5.7

Upload images with Laravel5.7.
Configure routing to save images posted from view.

Route::get('/image/index', 'ImageIndexController@index');
Route::post('/image/index', 'ImageIndexController@store');

imageindex.blade.php

@extends('layouts.image')
@section('title', '画像管理')

@section('breadcrumb')
	@@parent
	<ul class="breadcrumb">
      <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" >
        <a href="/top" itemprop="url">
          <span itemprop="title">ホーム</span>
        </a>
      </li>
      <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" >
        <a href="/top" itemprop="url">
          <span itemprop="title">画像管理</span>
        </a>
      </li>
    </ul>
@endsection

@section('content')
<h2>画像管理</h2>
      <hr>
      <form action="/image/index" 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> 

      <!-- remodal -->
      <div class="remodal" data-remodal-id="modal">
        <button data-remodal-action="close" class="remodal-close"></button>
        <h1>保存しますか</h1>
        <p>
          入力した内容で宜しいでしょうか?
        </p>
        <br>
        <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
        <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
      </div>
      <!-- /remodal -->

      <script>
      var fileArea = document.getElementById('drag-drop-area');
      var fileInput = document.getElementById('fileInput');

      fileArea.addEventListener('dragover', function(evt){
        evt.preventDefault();
        fileArea.classList.add('dragover');
      });

      fileArea.addEventListener('dragleave', function(evt){
        evt.preventDefault();
        fileArea.classList.remove('dragover');
      });

      fileArea.addEventListener('drop', function(evt){
        evt.preventDefault();
        fileArea.classList.remove('dragenter');
        var files = evt.dataTransfer.files;
        fileInput.files = files;
      });

      </script>
      
@endsection

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に静的HTMLファイルを配置する

Laravel5.7で静的HTMLファイルを配置する場合

/resources/views配下の*.blade.php はcontrollerで呼び出しているので、viewsディレクトリではなく、/public配下に*.htmlを配置する。

例: help.htmlを置いてみます。

help.html

hello

htmlを確認すると、反映されています。

Laravel5.7 テンプレートの継承

公式ドキュメントのBladeテンプレートの継承に習って構築していきます。
https://readouble.com/laravel/5.7/ja/blade.html

レイアウト定義
Bladeビューとして定義する。マスターのテンプレート名は迷いますね。公式ドキュメントではapp.blade.phpと記載がありますが、これは悩みますな。
とりあえず入れてみます。
/resources/views/app.blade.php

<!DOCTYPE html>
<html>
  <head>
  	<meta http-equiv="Content-Type" charset="utf-8">
    <title>@yield('title')</title>
    <meta name="description" content="Zeusはメール配信管理システムです。" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/main.css') }}">
    <link rel="shortcut icon" href="/assets/img/favicon.png">
    <script src=""></script>
  </head>
  <body>
   <!-- 共通ヘッダー -->
   <div id="header">
    <h1><a href="/"><img src="/asset/img/log.png" alt="" />Zeus</a></h1>
    <ul id="helpNav">
        <li><a href="/top.html">ホーム</a></li>
        <li><a href="/logout.html">ログアウト</a></li>
    </ul>    
    <ul id="gNav">
        <li class="menu__single"><a href="/profile">アカウント一覧</a>
        <ul class="second_level">
          <li><a href="/profile">プロフィール詳細</a></li>
          <li><a href="/account/index">アカウント一覧</a></li>
          <li><a href="/account/input">アカウント新規登録</a></li>
          <li><a href="/company/index">原稿管理会社一覧</a></li>
        </ul>
        </li>
        <li class="menu__single"><a href="/manu/index">原稿一覧</a>
        <ul class="second_level">
          <li><a href="/manu/index">原稿一覧</a></li>
        </ul>
        </li>
        <li class="menu__single"><a href="/help.index">Zeusについて</a>
          <ul class="second_level">
            <li><a href="/help.index">ヘルプ</a></li>
            <li><a href="/manual/zeus.pdf">マニュアル</a></li>
            <li><a href="/rules.html">利用規約</a></li>
            <li><a href="/login">ログイン</a></li>
          </ul>
        </li>
        </ul>
    </div>
    <!-- / 共通ヘッダー -->

    <div id="content">
      @yield('content');
    </div>

    <!-- 共通フッター -->
  	<footer>
  		hpscript
  	</footer>
    <!-- / 共通フッター -->
  </body>
</html>

継承するレイアウトを指定する
resources/views/top.blade.php

@extends('app')
@section('title', 'トップページ')

@section('content')
<div id="top-main">
         <h2>Zeus</h2>
         <p>原稿作成・入稿ツールです。<br>原稿の作成・保存・入稿作業にご利用いただくことができます。</p>
      </div>
      <div id="news_h">
            <p>お知らせ</p>
      </div>
      <div id="news_t">
            <p>2018/10/17 ツールをリニューアルしました。</p>
      </div>
@endsection

ああああああああああ、これはマジで凄い。
Laravelびっくりした。

便宜的にlayoutフォルダの下に格納した方が良さそうですね。

Laravel5.7 bladeファイルをインクルードする手順

1. 何をインクルード化するか決める
2. /resources/views/ 配下にテンプレート化するbladeファイルを作成する
3. 2で作成した共通ファイルにインクルードする内容を書く
4. @include(”)構文を利用してインクルードする

1. 何をインクルード化するか決める
なにをインクルードするか。
パーツとして思いつくのは、head、header navi、footer。他にもあるかもしれないが、まずは、この3つをインクルードする。

2. /resources/views/ 配下にテンプレート化するbladeファイルを作成する
共通ヘッダをインクルードするため、common-head.blade.phpをviewsディレクトリ配下に作る。

3. 2で作成した共通ファイルにインクルードする内容を書く
あれ、titleはインクルードできないじゃん。

<head>
  	<meta http-equiv="Content-Type" charset="utf-8">
    <title>トップページ</title>
    <meta name="description" content="Zeusはメール配信管理システムです。" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet">
    <link rel="stylesheet" href="asset/css/style.css">
    <link rel="stylesheet" href="asset/css/main.css">
    <link rel="shortcut icon" href="/assets/img/favicon.png">
    <script src=""></script>
  </head>

もう一度しっかり公式ドキュメントを見てみよう。
Bladeテンプレートについて記載がありました。
https://readouble.com/laravel/5.7/ja/blade.html
やり直しましょうw

Laravel5.7でCSSを読み込む時

Laravelで読み込む際は、{{ asset(‘$path’)}}を使う。

<link href="{{ asset('$path') }}" media="all" rel="stylesheet" type="text/css" />

具体的に見てましょう。views配下にlogin.blade.phpがあります。
/resources/views/loging.blade.php
viewsの中に以下のようにassetフォルダはおきません。全てpublic配下に置きます。

<head>
    <meta charset="utf-8">
    <title>ログイン</title>
    <link rel="stylesheet" href="asset/css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
    <script src=""></script>
  </head>

CSSが効いていません。

/public/css/style.css を作る
css, js, imgなどはpublic配下に置く

先に作っていたcssをペーストします。

body {
  margin: 0px; }
  body #content {
    margin-right: 50px;
    margin-left: 50px; }
    body #content .sm {
      font-size: 11px; }

h1 {
  text-align: center; }

p {
  font-size: 0.975px; }

#form {
  font-size: 0.875px; }
  #form tr {
    height: 80px; }
  #form th {
    border: solid 1px #ccc;
    width: 200px;
    text-align: left;
    background-color: #f5f5f5;
    padding: 5px; }
  #form td {
    border: solid 1px #ccc;
    width: 800px;
    padding-left: 10px; }

.button_wrapper {
  text-align: center; }

input[type="text"] {
  border: 0;
  padding: 10px;
  font-size: 1.3em;
  color: #aaa;
  border: solid 1px #ccc;
  margin: 0 0 20px;
  width: 700px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  broder-radius: 3px; }

#square_btn {
  position: relative;
  text-align: center;
  display: inline-block;
  padding: 0.55em 0.7em;
  text-decoration: none;
  color: #fff;
  background: #483d8b;
  border: solid 1px #483d8b;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }

footer {
  position: fixed;
  margin-top:;
  bottom: 0px;
  width: 100%;
  height: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #483d8b;
  text-align: center;
  color: #fff; }

/resources/views/loging.blade.php のCSSパスを書き換え
bladeのパスを{{ asset(‘/css/style.css’) }}とします。

<head>
    <meta charset="utf-8">
    <title>ログイン</title>
    <link rel="stylesheet" href="{{ asset('/css/style.css') }}">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
    <script src=""></script>
  </head>

サーバーで確認
下図赤線で囲っているように、/loginでCSSが通っているのが分かります。

OKじゃないでしょうか。
では、数十ページやりましょうかね。やっぱり、Controllerとview、modelはそれぞれ考えることが違うので、モデル、フロントは先に作っておいた方が効率いいですね。
一人称でサイトつくるとMVCのメリットがイマイチわからんと思ってたけど、ER図、frontなどをそれぞれ作るなら、MVCの利が理解できます。