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

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

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の基本タグを書く

```php: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を用意
ひとまずテーブルに入れたデータをだしてみる。

```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
```

# ブラウザに表示された
やったぁ！ひとまずは。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1007978/ceae3a40-4459-86c7-23fc-6ddcaad845ba.png)

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

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