トップページ
Laravel学習サイトLaravelやるばい

目次

つぶやきの作成ページにアクセスとtweetテーブルの作成

今回はつぶやきを作成するページにアクセスしてつぶやきを保存する為のテーブルを作成します。

アプリっぽさが今回から出てきます。


つぶやきを作成・保存する時の考え方

あなたがつぶやきを投稿する時をイメージすると考えやすいと思います。

まずつぶやきを投稿するページに移動します。

そしてつぶやきの内容を書いて保存します。

という事は2つの作業（ページの表示とつぶやきの作成）でルーティング・コントローラー・ビューの処理が必要になります。

今回の解説ではつぶやきを作成するページを表示して次回の解説でつぶやきを作成します。


つぶやきの作成

今回はどのアクションを使えばいいか分かりますか？

リソースコントローラーのアクションは下記でした。

つぶやきの作成なのでアクション名は「create」です。

createアクションに記述しますがファイル名を確認する為にターミナルで下記のコマンドを入力します。

xxxxxx@MacBook-Pro tweet % php artisan route:list

下記が表示されます。

tweet ................. tweet.index › TweetController@index
tweet ................. tweet.store › TweetController@store
tweet/create .......... tweet.create › TweetController@create
tweet/{tweet} ......... tweet.show › TweetController@show
tweet/{tweet} ......... tweet.update › TweetController@update
tweet/{tweet} ......... tweet.destroy › TweetController@destroy
tweet/{tweet}/edit .... tweet.edit › TweetController@edit

createアクションを使うので「tweet.create」をアクションに記述しないといけません。

createアクションの記述を下記にします。

public function create()
{
    return view('tweet.create');
}

「return view('tweet.create');」は「return view('表示したいファイル名');」です。

そしてcreate.blade.phpを作成します。

「tweet > resources > views > tweet」の下にcreate.blade.phpを作成します。

そして下記の記述をします。

<div>
    <h1>つぶやきの作成</h1>
    <form>
        <div>
            <textarea name="body" cols="40" rows="10" placeholder="ここにつぶやきの内容を書く"></textarea>
        </div>
        <button type="submit">つぶやく</button>
    </form>
</div>

大事なのはtextareaタグのname属性です。

「name="body"」のbodyはDBのテーブルのカラム名です。

テーブルとカラムを作成しないといけませんがその前につぶやきを作成するページが表示されるかの確認をします。

アクション名を確認した時ですが下記から判断しました。

tweet ................. tweet.index › TweetController@index
tweet ................. tweet.store › TweetController@store
tweet/create .......... tweet.create › TweetController@create
tweet/{tweet} ......... tweet.show › TweetController@show
tweet/{tweet} ......... tweet.update › TweetController@update
tweet/{tweet} ......... tweet.destroy › TweetController@destroy
tweet/{tweet}/edit .... tweet.edit › TweetController@edit

createアクションを使ったのでアクセスするURLは「http://localhost:8888/tweet/create」です。

下記の表示になるかを確認して下さい。

20241123_123837_tweet13.jpg

確認ができたらテーブルとカラムを作成します。


テーブルとカラムの作成

Laravelではテーブルとカラムを作成できるマイグレーションファイルという物があってそれを使います。

SQL文は使いません。

ターミナルで下記のコマンドを入力します。

xxxxxx@MacBook-Pro tweet % php artisan make:model Tweet -m

Tweetはモデル名です。

このコマンドでモデルを作成できますが「-m」を付けることでマイグレーションファイルを同時に作成できます。

「tweet >databases > migrations > 本日の日付_create_tweets_table.php」が作成されているのを確認して下さい。

20241123_125823_tweet14.jpg

マイグレーションファイルを開くと下記になっています。

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('tweets', function (Blueprint $table) {
            $table->id();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('tweets');
    }
};

下記の追記をします。

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('tweets', function (Blueprint $table) {
            $table->id();
            $table->string('body');         //この行を追加
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('tweets');
    }
};

「$table->string('body');」の「$table->」はそのまま書いていいです。

「string」はvarcharやintなどのデータ型のことです。

stringはvarcharに該当しますが意味が分からなかったらとりあえずこのままやって下さい。

データ型はいっぱいあっていちいち調べると話がズレて訳が分からなくなるので深追いしない方がいいです。

「body」はカラム名です。

create.blade.phpで「name="body"」と記述したのでカラム名はbodyにしました。

まだコマンド入力をして欲しくないのですがマイグレーションファイルの内容をテーブルに反映させるにはターミナルで下記のコマンドを入力します。

xxxxxx@MacBook-Pro tweet % php artisan migrate

しかしMAMPのDBにアクセスする設定をまだしていないので設定をします。


MAMPのDBにアクセスする設定

WebStartをクリックします。

20241123_131627_tweet15.jpg

「Tools」（下記赤枠）をクリックして「phpMyAdmin」（下記青枠）をクリックすると「phpMyAdmin」に移動します。

20241123_131839_tweet16.jpg

「New」をクリックします。

20241123_132028_tweet17.jpg

下記赤枠に「tweet」と入力して「Create」をクリックするとtweetのDBが作成されます。

20241123_132310_tweet18.jpg

これでMAMP上にDBを作成したのでLaravelからMAMPのDBにアクセスできるようにします。

tweetの直下に「.env」があるので編集します。

隠しファイルになっているのでエディタから見て下さい。

20241123_132949_tweet19.jpg

下記の記載があります。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

下記に変更します。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=tweet
DB_USERNAME=root
DB_PASSWORD=root

これでLaravelからMAMPのtweetDBにアクセスできるようになりました。

それではマイグレーションファイルからテーブルとカラムを作成する為に下記のコマンドを実行します。

xxxxxx@MacBook-Pro tweet % php artisan migrate

下記の確認がでますが「Yes」の選択をして下さい。

WARN  The database 'tweet' does not exist on the 'mysql' connection.  

 ┌ Would you like to create it? ────────────────────────────────┐
 │ ○ Yes / ● No                                                 │
 └──────────────────────────────────────────────────────────────┘

これでtweetテーブルが作成されましたが確認します。

「phpMyAdmin」のページを開いてください。

URLは下記です。

http://localhost:8888/phpMyAdmin5/index.php?route=/server/databases

下記の表示になっていたらテーブルは作成されています。

20241123_134238_tweet20.jpg

今回はここまでです。

戻る