LoginSignup
2
1

More than 1 year has passed since last update.

@114hiro

５分で読める！ laravel で DB 作成から 画面にデータを表示するまで

Last updated at Posted at 2022-03-30

大事な部分でありながら、短い文章でまとめられていて初学者でもイメージしやすいものがあまりなかったのでまとめてみました。間違っている部分もあるかもしれません。

初学者の備忘録ですので参考までに
環境

  • mac
  • mamp
  • composer 利用
  • MySql を利用

laravel インストール

composer create-project --prefer-dist "laravel/laravel=6.*" プロジェクト名

LTS（ロング・ターム・サポート）の「６」系統を使うことが多いと思います

php artisan serve

で確認

DB の作成

MAMPの画面の「webstart」をクリックし
http://localhost:8888/MAMP/?language=English#
の「tools」->「phpMyAdmin」と行き、DB を作成

「.env」の設定を変更

http://localhost:8888/MAMP/?language=English#
の真ん中あたりにある「MySql」の設定と「.env」ファイルの中身を合わせるイメージで

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT= ---「phpMyAdmin」の上部に記載されている---
DB_DATABASE= ---「phpMyAdmin」で決めたDB名---
DB_USERNAME= --- 初期値は「root」---
DB_PASSWORD= --- 初期値は「root」---

「config/app.php」設定を変更

'timezone' => 'Asia/Tokyo',
〜〜〜〜〜
'locale' => 'ja',
〜〜〜〜〜
'faker_locale' => 'ja_JP',  <- faker を使うのであれば

マイグレーションファイル（テーブルの設計図）の作成

php artisan make:migration create_〇〇_table

database/migrations/〇〇　として作成されます
〇〇のテーブル名は先頭小文字、複数形
*create_users_table　など

カラム名・データ型などは、最初からあるマイグレーションファイルと
https://readouble.com/laravel/6.x/ja/migrations.html
を見てイイカンジに作る
後からカラムの追加や、テーブルの作り直しなどもできるのであまり深く考えなくてもいいと思います

今回は以下のようにしました

database/migrations/2022_03_30_010730_create_articles_table.php

<?php

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

class CreateArticleTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('articles', function (Blueprint $table) {
            $table->string('url', 200)->unique();
            $table->string('author', 100);
            $table->string('articleTitle', 200);
            $table->string('tags', 300);
            $table->string('site', 10);
            $table->date('posted');
        });
    }

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

migrate の実行（マイグレーションファイルを元にテーブルの作成）

php artisan migrate

マイグレーションのやり直し

「やっちまったなぁ～」と思ったら

$ php artisan migrate:reset

【laravel】マイグレーション、やり直しコマンドいろいろ
https://qiita.com/rope19181/items/c7862f9a0a22443ddb48

Model の作成

モデルは少なくても２個以上になりやすいので app/ 下に Models フォルダがない場合、
一緒に Models フォルダも作成します

php artisan make:model Models/〇〇

〇〇は頭大文字単数形　例：User

Model の編集

今回は以下のようにしました

Models/Article.php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Article extends Model
{
    // ①
    protected $fillable = [
        'url', 'author', 'posted', 'articleTitle', 'tags', 'site'
    ];
    // ②
    public $timestamps = false;
}

① $fillable はデータの変更の可能性があるカラム名を指定します
今回は「とりあえず」の確認がしたいので全カラムを登録しています。

デフォルトでEloquentはデータベース上に存在するcreated_at(作成時間)とupdated_at(更新時間)カラムを自動的に更新します。

② 今回は「created_at」「updated_at」カラムもないのでこのままだとエラーを吐いてしまいます。そのためここでは false を指定します

Eloquent：利用の開始 複数代入
Eloquent：利用の開始 タイムスタンプ
https://readouble.com/laravel/6.x/ja/eloquent.html

Controller の作成

DB の窓口である Model とやりとりしたり、それ以外の処理をしたり、両方をしたりするのが Controller です

php artisan make:controller 〇〇Controller

〇〇は頭大文字単数形　例：User

Controller の編集

app/Http/Controllers/ArticleController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

// 追加
use Illuminate\Support\Facades\DB;

class ArticleController extends Controller
{
    public function getArticle () {
        // ①
        $articles = DB::table('articles')->get()->toArray();
        // ②
        return view("index")->with("articles", $articles);
    }
}

マイグレーションファイル作成時に付けたテーブル名を対象とし（①）、ビューファイルに配列として「$articles」を渡している点（②）に注目してください！
後はお察しの通り、コレをループで回せば DB のデータを表示できるわけですね！

今回は一覧ページ的な物の作成を考えていますのでデータの取得のみを行います

よく使うものを下記サイト様から抜粋させていただきました

メソッド名 役割
all() すべてのデータを抽出
get() 結果を取得する
where(‘フィールド名’, 条件) 指定したフィールド名のカラムから条件に一致するものを抽出
toArray() 配列に変換する
count() 数を数える

【Laravel】モデル（Model）とは何か？命名規則やマイグレーションとの関連性｜Eloquentやクエリビルダとは何か？
https://prograshi.com/framework/laravel/model-eloquent-and-query-builder/

ダミーデータの準備

まず、ダミーデータに関する単語としては以下の３つが挙げられると思います

  • factory
    「ダミー感」の少ないダミーを量産しやすくするためにデータの定義を決める。
    「タイトル＿〇〇」や「出席番号＿〇〇」など
    factory->工場->量産！　のイメージを持ちますが、「１件だけテーブルに挿入する」なんてこともできます(本末転倒かもしれませんが)。

  • Faker
    とはいえテーブルに入れるようなデータは name, url などだいたい決まっているので
    「あるある」カラム用のデータは Faker を使ってみてもいいかもしれません

  • Seeder
    種まき。何件用意するかなど。これだけでも割となんとかなる。

”データの量の大小でレイアウトが崩れないか確認したい”くらいなら Seeder ファイルのみでいいので今回はコレで行きます

・seeder ファイルの作成

php artisan make:seeder 〇〇Seeder

〇〇は頭大文字単数形　例：User
これで database/seeds/〇〇Seeder.php として seeder ファイルが作成されます

database/seeds/ArticleSeeder.php
<?php
use Illuminate\Database\Seeder;
use App\Models\Article;  // 書き忘れやすい

// ①
class ArticleSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        Article::truncate();  // 既存データがある場合邪魔なので

        for ($i = 1; $i <= 100; $i++) {
            // ②
            DB::table('articles')->insert([
                'url' => 'sample_' . (string) $i . '.com',
                'author' => 'author_' . (string) $i,
                'articleTitle' => 'title_' . (string) $i,
                'tags' => "野獣先輩, 女の子",
                'site' => "淫夢マニア",
                'posted' => '1919/08/10',
            ]);
        }
    }
}

次に、最初からある「seeds/DatabaseSeeder.php」の編集をします

seeds/DatabaseSeeder.php
<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        // $this->call(UsersTableSeeder::class);
        // ③
        $this->call(ArticleSeeder::class);
    }
}

①と③のクラス名に注目してください。ここを対応させることで「DatabaseSeeder」のスイッチで「ArticleSeeder」を起動させるイメージです。
また②は先程と同じテーブル名をしています。

これで 100 件分のダミーデータの準備ができました
以下のコマンドを打ち量産してもらいます

php artisan db:seed

phpMyAdmin でデータが挿入されたか確認してみましょう。

自分はまだまだですが、factory, faker を利用時は以下を参考にするといいと思います

データベースのテスト
https://readouble.com/laravel/6.x/ja/database-testing.html
Factory, Fakerでテストデータ生成
https://www.wakuwakubank.com/posts/451-laravel-factory-faker/

見た目部分を作りデータが届いているか確認

resources/views/index.blade.php を作成し以下のようにしました

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .article {
            margin: 4px;
            padding: 4px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <p>これはてすと</p>

    @for ($index = 0; $index < count($articles); $index++)
        <div class="article">
            <p class="url">{{ $articles[$index]->url }}</p>
            <p class="author">{{ $articles[$index]->author }}</p>
            <p class="title">{{ $articles[$index]->articleTitle }}</p>
            <p class="tags">{{ $articles[$index]->tags }}</p>
            <p class="site">{{ $articles[$index]->site }}</p>
            <p class="posted">{{ $articles[$index]->posted }}</p>
        </div>
    @endfor

</body>
</html>

次にルーターを変更します

routes/web.php
<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

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

// Route::get('/hello', 'HelloController@index');

// ①
Route::get('/', 'ArticleController@getArticle');

第２引数として　'作成したコントローラー名@メソッド名' となっているのがポイントです。

php artisan serve

でサーバーを立ち上げ確認してみましょう。

以下のように表示されれば成功です
スクリーンショット 2022-03-30 17.53.32.png

うまく行かない場合は文字ミスが多いですが探すのは大変なので
新フォルダを作成し、最初からやり直すことをおすすめします

今回はここまでです。
読んでいただきありがとうございました。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1