laravel_Routeファイルを編集する

12Routeファイルを編集する

コントローラは作成しただけでは何の役割も持ちませんし実行されません。

実行されるようにするためにはRouteファイルに追加してあげなければなりません。

Routeファイルを開いて以下のコードを追加してください。

「05 Routeについて学ぶ」で学習した内容を思い出して進めましょう。RouteファイルはRoutes/web.phpを使います。

もともとあったコードは削除してください。

// この部分は削除
Route::get('/', function() {
    return view('welcom');
});
// この部分を追加
Route::get('/', 'App\\Http\\Controllers\\MemoController@show');

コードの説明をします。

URLにアクセスされると今回はApp\Http\Controllers\配下にあるMemoControllerが呼び出されています。さらに@showの部分でMemoControllerのshowメソッドを表示するように設定しています。

もう一度URLにアクセスしてみましょう。

画面は変わりませんが先ほどと違うのはコントローラを経由しているかどうかです。

処理の流れとしては、

RouteでMemoControllerのshowメソッドが呼び出される

showメソッドの中身が実行されrerurn view('home');が実行されhome.blade.phpが表示される。

という流れになります。

メモを追加してみる

メモを追加＝ DBに値を追加するです。

実際にデータを追加してみましょう。

流れとしては以下のとおりです。

ブレードファイルからコントローラにデータを送信する
コントローラでデータを受け取る
コントローラでモデルを呼び出しDBに追加する

です。

順に実装していきましょう。

1. ブレードファイルからコントローラにデータを送信する

home.blade.phpの「メモを追加」部分を以下のように修正してください。

<div class="memo_form">
     <h2>メモを追加</h2>
     <form action="{{ asset('/add') }}" method="post">
	@csrf
         <input class="memo_text" type="text" name="memo_text" id="memo_text">
         <input type="submit" value="追加">
     </form>
</div>

<form action=”{{ asset('/add') }}” method="post"></form>の部分に注目してみましょう。

まず、action=”{{ asset('/add') }}”についてです。

actionはformの送信先を設定することができます。

属性値に URI を指定することで、入力されたフォームの送信データの送信先を設定することができます。

今回は{{ asset('/add') }}を設定しています。asset()は前に解説した通り、publicディレクトリのパスを返す関数となっています。なので実際にはhttp://localhost:800/addというURLに変換されます。

よって、action=”{{ asset('/add') }}”の部分はhttp://localhost:800/addにデータを送信するよ、という意味になります。

ちなみにですが送信されるデータは<form></form>内にあるinput属性が送信されます。

今回で言うと、<input class="memo_text" type="text" name="memo_text" id="memo_text">この部分です。

memo_textというname属性のテキストボックスに入力された文字列がサーバーに送信されることになります。

続いてmethod="post"の部分ですが、method=””ではデータの送信方法を選択することができます。

大体はpostかget通信になります。今回はpost通信を選択しています。

続いてコントローラを編集します。

MemoController.phpに以下のコードを追加しましょう。

public function add()
{
    return view('home');
}

コントローラの中身は、home.blade.phpを表示するだけの簡素なコードです。

コントローラとブレードファイルは作成できましたがこのままでは何も動きません。

コントローラメソッドとurlを結び付けるためにルートファイルを編集します。

web.phpに以下のコードを追記してください。

Route::post('/add', 'App\\Http\\Controllers\\MemoController@add');

お分かりかもしれませんが、/addのurlにPOST通信でアクセスされた時にMemoControllerのaddメソッドを実行するという意味になります。

これで無事にメモの追加ボタンを押したときコントローラに入力されたテキストが送信されるようになりました。

実際にデータを送信できているか確認してみましょう。

画面上で右クリックし(またはctrl + shift + j)検証をクリックしデベロッパーツールを開きましょう。

次にタブ「NetWork」をクリックしてください。

NetWorkは送信されたデータの中身や読み込まれたファイル、アクセスされたurl情報を見ることができます。

実際にメモを追加のテキストボックスにテキストを入力し追加ボタンを押してみましょう。

Name欄にaddが表示されているはずです。

何かエラーが出た場合はどこかで記述が間違ってしまっている可能性があるのでもう一度確認しましょう。

addのPaloadをクリックすると、addのurlに送信されたデータの中身を見ることができます。

今回は「_token」「memo_text」の２つが送信されています。

「memo_text」に今回テキストボックスに入力したデータがはいっています。

今後開発をする中でもどんなデータが送信されているかなどを確認する場面が多々あるので、NetWorkから確認できることを覚えておきましょう。

では続きに戻ります。現状データは送信されていますが受信する側に何もコードを書いていないためデータが追加されることはありません。

２．コントローラでデータを受け取る

それではデータを受け取る部分を書いていきましょう。

memoController.phpのaddメソッドを以下のように追記してください。

public function add(Request $request)
{
    dd($request);
    return view('home');
}

追記できたらメモを追加してみましょう。

追加ボタンを押すと上記画像のように黒い画面が表示されると思います。

これはdd($request);が影響しています。

dd()は「dump and die」の略でdd()の行で処理を止め、引数の中身の変数を画面に表示させます。

今回は$requestの中身が表示されています。

続いて$requestについてですが、$requestはLaravelに標準搭載されているRequestクラスが格納されており、ブレードから送信された情報やその他のサーバーやセッションなどの情報が詰まっています。

今回ほしい情報は「memo_text」のメモ追加のテキストボックスに入力されたテキストだけです。

requestのparametersを見てみましょう。

「_token」と「memo_text」が入っています。

この中でも「memo_text」の情報のみを取得するときは以下のように記述します。

public function add(Request $request)
    {
        $memo_text = $request->memo_text; // これで「memo_text」を取得できます
        dd($memo_text);
        return view('home');
    }

ページを再度読み込んでみると「memo_text」の中身のサンプルテキストのみが取得できています。

$memo_text = $request->memo_text;この部分が$requestの受信データの塊からmemo_textという名のname属性を持ったデータを取得し$memo_textという変数に格納しています。

ここまでの手順でデータを取得できたので、続いてデータをDBに登録してみましょう。

３．コントローラでモデルを呼び出しDBに追加する

DBに追加や削除する場合にはモデルを使います。

以下のコードをMemoController.phpに追加してください。

use App\Models\Memo;　// 追加
(省略)
public function add(Request $request)
{
    $memo_text = $request->memo_text;
    $memo_model = new Memo();
    $memo_model->content = $memo_text;
    $memo_model->save();
    return self::show(); // ここを書き替える
}

コードの解説をしていきます。

まずMemoモデルを使用するため、use App\Models\Memo;を追加しています。

次に$memo_model = new Memo();この部分ですが、Memoモデルをインスタンス化して$memo_modelに格納しています。

ここから作成した空っぽのインスタンスにデータを追加していきます。

$memo_model->content = $memo_text;この部分でインスタンスのcontentというプロパティに$memo_textつまりメモ追加テキストボックスに入力された文字列を格納しています。

ここまでではインスタンスにデータが格納されただけでDBにはデータが追加されていません。

最後にインスタンスの内容をDBに登録します。

$memo_model->save();インスタンスにsave()を使うことによってDBに保存することができます。

実際にDBの中身を確認してみましょう

ターミナルでmysqlに入り（sudo mysql -u root）、下記コマンドを実行しましょう。

SELECT * FROM memos;

データがしっかり入っていますね。

これで無事にDBに値を追加する部分を実装することができました。

では、続いてDBの中身を画面に表示させてみましょう。

laravel_Routeファイルを編集する

12Routeファイルを編集する

メモを追加してみる

1. ブレードファイルからコントローラにデータを送信する

２．コントローラでデータを受け取る

３．コントローラでモデルを呼び出しDBに追加する

コメント

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル