【市場価値がわかる】エンジニア転職におすすめなサイト

Docker×Laravel8もくもく会アプリ作成3(テーブル設計・初期表示)

20代の転職ならマイナビジョブ

もくもく会アプリのテーブル設計や初期画面の表示について解説していきます。

まだアプリ概要や環境構築が済んでいない方は、前回の記事をご参照ください。

Contents

初期設定

前回の記事でDockerとLaravelの環境構築が終わったので、Laravelの初期設定をしていきます。

やることは3つで、タイムゾーンとlocalの設定です。

'timezone' => 'Asia/Tokyo',
  'locale' => 'ja',

resourcesのlang配下にjaファイルを作成し、validation.phpを置きます。

ja > validation.phpの中身は、en > validation.phpの中身をコピペしましょう。

テーブル設計

今回のもくもく会のアプリでは、使うテーブルは2つです。

  • eventsテーブル(もくもく会の詳細)
  • categoriesテーブル(カテゴリー)
テーブル名カラム
eventsevent_id(主キー)
category_id(カテゴリーID)
title(タイトル)
date(日付)
start_time(開始時間)
end_time(終了時間)
content(詳細)
entry_fee(参加費用)
PK
bigInt(unsigned)
string(50)
date
time
time
text
integer
categoriescategory_id
category_name
PK
string(255)

マイグレーションファイルを作成する

テーブル設計をもとにマイグレーションファイルを作成します。

私の環境は、Dockerなので、appコンテナに入ってLaravelを操作します。

// アプリのディレクトリに移動し、appコンテナに入る
mokumoku-events % docker compose exec app bash

 /var/www/html# 

ここから、categoriesのマイグレーションファイルを作成します。
(eventsテーブルでcategory_idが必要なため、先にcategoriesテーブルを作成する必要あり)

/var/www/html# php artisan make:migration create_categories_table --create=categories
Created Migration: 2021_11_07_061704_create_categories_table

テーブル設計をもとにマイグレーションファイルを編集します。

もし、まだLaravelのマイグレーションについて不安がある場合は、以下の記事を参考にしてくださいね!

<?php

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

class CreateCategoriesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->id('category_id');
            $table->string('category_name', 255);
            $table->timestamps();
        });
    }

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

マイグレーションファイルが編集できたら、migrateを実行してテーブルを作成します。

/var/www/html# php artisan migrate
Migrating: 2021_11_07_061704_create_categories_table
Migrated:  2021_11_07_061704_create_categories_table (269.99ms)

phpmyadminでcategoriesテーブルを確認。

categoriesテーブルが作成できていることが確認できました。

同様に、eventsテーブルを作成します。まずはマイグレーションファイルの作成です。

/var/www/html# php artisan make:migration create_events_table --create=events
Created Migration: 2021_11_07_062248_create_events_table

マイグレーションファイルを編集します。

<?php

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

class CreateEventsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('events', function (Blueprint $table) {
            // 主キー
            $table->id('event_id');
            // カテゴリーID
            $table->unsignedBigInteger('category_id');
            // タイトル
            $table->string('title', 50);
            // 開催日付
            $table->date('date');
            // 開始時間
            $table->time('start_time');
            // 終了時間
            $table->time('end_time');
            // 詳細
            $table->text('content');
            // 参加費用
            $table->integer('entry_fee');
            $table->timestamps();

            // カテゴリーID外部キー制約
            $table->foreign('category_id')->references('category_id')->on('categories');
        });
    }

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

編集できたら、migrateを実行します。

/var/www/html# php artisan migrate
Migrating: 2021_11_07_062248_create_events_table
Migrated:  2021_11_07_062248_create_events_table (261.79ms)

phpmyadminでeventsテーブルを確認しましょう。

eventsテーブルも作成できていますね。

マイグレーションファイルが実行されているか確認しましょう。
/var/www/html# php artisan migrate:statusを実行し、
| Ran? | Migration
| Yes | 2021_11_07_061704_create_categories_table
| Yes | 2021_11_07_062248_create_events_table
と、YesになっていればOKです。

初期画面の設定

必要なテーブルが作成できたので、アプリの初期画面を作成していきます。

まずは、Laravelをインストールしたときにwelcom.balde.phpが初期設定されているので、それを削除しましょう。

そして、ルーティングの記述も削除しましょう。

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

ビューファイルを作成します。

表示を確認するために、event > index.blade.phpに簡単に記述します。

<h1>Hello</h1>

ルーティングを記述します。

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('event.index');
});

Dockerのコンテナが起動していることを確認し、localhost:〇〇(.envで定義したWEB_PORTの番号)にアクセスしてみると、event > index.blade.phpのHelloが表示されます。
私はWEB_PORTを90に設定しているので、localhost:90で表示が確認できました。
(どうやって、WEB画面やphpmyadminに接続するんだっけ?となったら前回の環境構築の記事を参照ください。)

localhost:90

ここまでで、テーブル設計と初期画面などは終わったので、次回は一覧画面の作成を解説します。

エンジニア転職なら↓

副業を始めるなら↓

20代の転職ならマイナビジョブ

現役エンジニアに相談するならMENTA(おすすめ)

スキルを売り買いするならココナラ

動画教材ならUdemy

コメント

コメントする

CAPTCHA


Contents
閉じる