Self-Curation

新卒社会人で営業マンになりました

Laravel#3 簡単な投稿フォームの作成(フロント側)

f:id:scuration:20200802232227p:plain

前回は初っ端からユーザー情報テーブルの作成と認証機能の実装を行いました。

まだLaravelでページ作成を行っていなかったので今回は投稿フォームのページを表示させてみたいと思います。

http://127.0.0.1:8000/newpostを開くことで以下のようにviewに書いた投稿フォームを表示します。

f:id:scuration:20200810200722p:plain

フォームの送信データとベースとの接続は次の回で行えればと。。。。

Model

まずmodelの作成から行います。
自分もまだmodelの役割についてピンと来ない部分はありますが、データベースとアプリの橋渡し役的な感じでしょうか。


データベースのカラム(項目)自体はmigrationファイルで弄ることが可能です。
ただmodelファイルがないとデータベースにデータを保存する際にエラーで詰まります。



modelファイル自体は以下のコマンドで生成できます。
今回は投稿データを扱うためのmodelファイルを作成したいのでPostという名前で作成しました。



ここで注意すべき点はphpでクラスやテーブルを作成するときに命名規則がある点です。



例えばLaravelでpostというモデルとテーブルを作成しようとすると以下のようになります。
モデルクラス名:Post
モデルファイル名:Post.php
テーブル名:posts



つまりpostという名のテーブルをデータベースに作成したいときはpostsという名前で作成し、対応するPostというモデルを作成します。



モデルファイルは以下のようにphp artisan make:model 〇〇(モデル名)のコマンドを叩くことで作成できます。

php artisan make:model Post

また「後ほどデータベースのカラムに合わせてこのモデルファイルを編集する」ということも認識しておいてください。
データベースとの接続は次回の記事で取り上げます。

View

プロジェクト名/resources/viewsフォルダにviewファイルを作成します。

Laravelでは「〇〇.blade.php」が命名ルールとなっているのでnewpost.blade.phpというファイルを作成しました。

実際に表示するHTMLファイル意識して以下のようにformメソッドを書きます。

<form action="action.php" method="post">
 名前: <input type="text" name="name" />
 コメント: <input type="text" name="coment" />
 <input type="submit" />
</form>

フォーム以外何も書いていないので表示ぐちゃぐちゃですがこれでも一応最低限のフォーム機能は実装可能です。

Controller

C:\PHP\Sample>php artisan make:controller NewpostController

ターミナルで上記コマンドを叩くことでコントローラーファイルを自動生成可能です。

Sample\app\Http\ControllersフォルダにSampleController.phpファイルが作成されています。
開いてみましょう。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SampleController extends Controller
{
    //
}

{}内に以下のように追記します。
先ほどnewpost.blade.phpというviewファイルを作成したので、
呼び出したときに返すviewの名前はnewpostと記入します。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SampleController extends Controller
{

    //投稿フォームの表示
public function Newpost() {
        return view('newpost');
}

}


先に説明しておくと次項のルーティングを行うことによって
example.com/newpostを開くとNewpostcontroller.php内にあるNewpostクラスを呼び出す
②ルーティングで設定したnewpostというviewを返す
という流れになります。

route

最後にルーティングを行います。
ルーティングとは、例えば「ブラウザでexample.com/indexを開いたときに対応するページを表示する」といった作業です。

\routesフォルダにあるweb.phpを編集します。

<?php

use Illuminate\Support\Facades\Route;

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

//以下を追記
Route::get('/newpost', 'NewpostController@Newpost');

デフォルトで記入されている内容にNewPostページを開く内容を追記します。


今回記述したのは「example.com/newpostを開くとNewpostcontrollerを呼び出し、Newpostクラスを実行する」という内容になります。

ローカルサーバーで確認

C:\PHP\Sample>php artisan serve

ターミナルで上記コマンドを叩けばローカルサーバーを起動できます。

http://127.0.0.1:8000

まず上記URLを開けばデフォルトページが表示されるはずです。

今回はルーティングでRoute::get('/newpost', 'NewPostController@newpost');と設定しているので

http://127.0.0.1:8000/newpost

を開けば先ほど作成したページが表示されるはずです。

f:id:scuration:20200810200722p:plain