Laravel webアプリケーション作成part1 プロジェクト作成〜ブラウザ表示

9719 ワード
マイグレーション Laravel プロジェクト作成 初心者 Webアプリケーション 初心者 テキストリンク

作り込んでいくところは別記事で予定。

Laravel webアプリケーション作成part2 CRUD操作/ログイン機能
https://qiita.com/machiryu/items/c79b85110d6dccd64a72

ブラウザへのテーブルデータ表示まで

プロジェクト作成

  • 作成 composer create-project laravel/laravel CombiOkashi
  • php artisan serveしてブラウザで確認。

DB接続設定

  • config\database.phpを修正 18行目のmysqlをsqliteへ。
  • touch database/database.sqlite
  • PJ直下の.envを修正 DB_CONNECTION=sqliteへ、他項目はコメントアウト。 DB_CONNECTION=sqlite # DB_HOST=127.0.0.1 # DB_PORT=3306 # DB_DATABASE=laravel # DB_USERNAME=root # DB_PASSWORD=

dbマイグレーション

  • migrationファイルの作成 php artisan make:migration create_okashis_table
  • カラムの追加
  • マイグレーション実行
$ php artisan migrate
Migration table created successfully.
  • okashiテーブルにカラムの追加 user_id
$ php artisan make:migration add_user_id_to_okashis_table --table=okashis
Created Migration: 2021_02_09_142352_add_user_id_to_okashis_table

up() に追加。マイグレーション実行。
がエラー。

$ php artisan migrate
Migrating: 2021_02_09_142919_add_user_id_to_okashis_table
Illuminate\Database\QueryException
SQLSTATE[HY000]: General error: 1 Cannot add a NOT NULL column with default value NULL (SQL: alter table "okashis" add column "user_id" integer not null)

テーブル作成時はNOT NULL制約を指定できるが、列追加するときはNOT NULL制約をつけることができない。
->nullable();を入れてやる。
$table->integer('user_id')->nullable();
マイグレーション成功。

$ php artisan migrate
Migrating: 2021_02_09_142919_add_user_id_to_okashis_table
Migrated:  2021_02_09_142919_add_user_id_to_okashis_table (18.57ms)

model作成 いらんかも

$ php artisan make:model Okashi
Model created successfully.

controller作成

$ php artisan make:controller OkashiController
Controller created successfully.

view作成

resources\views
- \layoutsにapp.blade.phpを置く
- \okashisに中身を置く

routing作成

  • routes\web.php

ブラウザで確認
okashis.index was not found.でエラー。
単純なファイル設置ミス。階層１つ上やった。
→表示成功

シードの作成

$ php artisan make:seeder OkashiTableSeeder
Seeder created successfully.

作成したファイル内にデータ記述する。

public function run()
{
    //レコード１
    $param = [
        # 'img1' => '',
        'name1' => 'ポッキー',
        # 'img2' => '',
        'name2' => 'ポテトチップス　コンソメ',
        'taste' => '3',
        'price' => '4',
        'surprice' => '2',
        'comment' => '定番どうしの掛け算。まぁおいしい。',
    ];
    $okashidata = new Okashi;
    $okashidata->fill($param)->save();
    //レコード２
    この下は繰り返し

これだけでは使えない。同階層にデェフォルトであるDatabaseSeeder.phpに記述する。

public function run()
{
    $this->call(OkashiTableSeeder::class);
}

php artisan db:seed
シート実行 php artisan db:seed。
エラー　Class 'App\Okashi' not found
シードファイルの上部にuse App\Models\Okashi;が必要だった。
エラー

 Illuminate\Database\QueryException

SQLSTATE[23000]: Integrity constraint violation: 19 NOT NULL constraint failed: okashis.img1 (SQL: insert into "okashis" ("name1", "name2", "taste", "price", "surprice", "comment", "updated_at", "created_at") values (ポッキー, ポテトチップス　コンソメ, 3, 4, 2, 定番どうしの掛け算。まぁおいしい。, 2021-02-09 15:05:33, 2021-02-09 15:05:33))

Database seeding completed successfully.と表示されればOK。

HTML/CSS

app.blade.phpを用意

HTMLの基本タグを書く

resources\views\layouts\app.blade.php
<!doctype html>
<html>
<head>
  <title>おかしコンビネーション</title>
</head>
<body>
  <h1>最強の組み合わせはどれだ！！</h1>

  <main class="">
    @yield('content')
  </main>
</body>
</html>

index.blade.phpを用意

ひとまずテーブルに入れたデータをだしてみる。

resources\view\okashis\index.blade.php
@extends('layouts.app')

@section('content')
  @foreach ($okashis as $okashi)
    <div class="">
      <div>{{ $okashi->name1 }} × {{ $okashi->name2 }}</div>
      <div>{{ $okashi->taste }}</div>
      <div>{{ $okashi->price }}</div>
      <div>{{ $okashi->surprice }}</div>
    </div>
  @endforeach
@endsection

ブラウザに表示された

やったぁ！ひとまずは。

おわり

最初の１歩は踏み出せたが、まだつづきは長そうです。

つづきは、
Laravel webアプリケーション作成part2 CRUD操作/ログイン機能
https://qiita.com/machiryu/items/c79b85110d6dccd64a72