0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-02-14

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

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.でエラー。
単純なファイル設置ミス。階層1つ上やった。
→表示成功

シードの作成

$ php artisan make:seeder OkashiTableSeeder
Seeder created successfully.

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

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

これだけでは使えない。同階層にデェフォルトである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

ブラウザに表示された

やったぁ!ひとまずは。
image.png

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

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

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?