前回まで

前回までで画面を表示させるところまで完成しました。
【PHP】Laravel学習メモ / 簡易アプリで流れを掴む１（表示まで）

今回で完成

今回は、入力されたデータ（米ドル）を受け取り、日本円に換算して表示するところまで実装して、完成としたいと思います。為替は、今回１ドル＝110円として計算します。

完成動画

コードを追ってみましょう。

ルーティング

ルーティングは前回で終わっているので、そのまま使います。
本来Webサービス、アプリではもっと多くのルーティングを設定しますが、今回のアプリはトップページのみで動かす為、１行のみです。

routes/web.php

Route::get('/', function () {
    return view('welcome');
});

Route::get('/calculate', 'CalculateController@getcalc');

コントローラー、ビュー

コントローラー

app/Http/Controllers/CalculateController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class CalculateController extends Controller
{
  public function getCalc(Request $request){

    $data['exchange'] = $request->input('usdoller');
    $data['jpyen'] = ($data['exchange'] * 110);

    return view('calculate.num', $data);
    //
  }
}

ビュー

resources / views /calculate / num.blade.php

resources/views/calculate/num.blade.php


<head>
    <title>計算アプリ</title>
</head>
<body>
    <h1>計算アプリです</h1>
    <h2>米ドルを入力すれば日本円に換算します</h2>
    <div>
        <form>
            <input type="text" name="usdoller" placeholder="$0" style="height: 30px; width: 120px;">
            <button type="submit">円に換算</button>
        </form>
        <p>日本円で{{ number_format($jpyen)}}円です</p>
    </div>
</body>
</html>

では、１つずつ見ていきます。

コントローラー

まず、コントローラーを順に見ていくと、viewから'usdoller'というデータを受け取っています。後ほどビューで見ますが、この中にはユーザーが入力した米ドルの金額が入っています。
その受け取ったデータを$data['exchange']に代入しています。

app / Http / Controllers / CalculateController.php

app/Http/Controllers/CalculateController.php


$data['exchange'] = $request->input('usdoller');

そして、'jpyen'にはusdollerに110（為替レート)を掛けたものを代入しています。


$data['jpyen'] = ($data['exchange'] * 110);

最後に、ビューに$dataを一緒に渡します。


return view('calculate.num', $data);

２つのデータを受け取っていますので、$data[　]の中身は２つ入っています。

$data['exchange', 'jpyen']

ビューで表示したいのは、計算結果が入っている'jpyen'です。
'jpyen'を表示させるようにしましょう。

では、ビューを見てみます。

ビュー

まず、入力欄とボタンを実装しています。ここは特に変わったことはしていません。ここで入力された金額が、コントローラーの$request->input()に渡されます。

resources / views /calculate / num.blade.php

resources/views/calculate/num.blade.php



<form>
      <input type="text" name="usdoller" placeholder="$0" style="height: 30px; width: 120px;">
            <button type="submit">円に換算</button>
</form>

コントローラーから渡されたデータを表示します。bladeファイルでは、{{ $データ }}で受け取ったデータを表示させることができます。number_formatは、数字の位をカンマで分けてくれる関数です。

<p>日本円で{{ number_format($jpyen)}}円です</p>

以上で完成です。

データの流れまとめ

・ビューのinputで入力されたデータはsubmitでコントローラーへ渡す。

・コントローラーでは$request->input()でデータを受け取る。

・受け取ったデータを、$data[]に代入する。

・為替の計算をし、return view(ビューのファイル, $data);でビューに渡す。

・ビューでは{{ $データ }}でデータを表示する。