# Laravel 01 復習　＋ 追加ワーク

---
## 環境構築
### ① サーバーの作成

下記設定で、「新規サーバー作成」
:::info
サーバ名：デフォルトでOK
web開発：PHP,Laravel
データベース：MySQL,phpMyAdmin
その他は設定不要
:::

### ② Laravelプロジェクトの作成

1. ターミナル上でLaravelプロジェクト作成コマンドを入力
`composer create-project laravel/laravel cms 6.* --prefer-dist`
2. プロジェクトディレクトリに移動
`cd cms`
3. Composerコマンドを実行
`sudo composer update`
4. BuiltInのLaravelサーバーを起動
`php artisan serve`
5. 動作確認
`Starting Laravel development server: http://127.0.0.1:8000
`
とターミナル上で表示され、ブラウザ（8000番ポート）をクリックしてLaravelのホーム画面が表示されていれば成功！

### ③ データベース作成&接続
1. データベースを作成

* phpMyAdminで作成する場合
①左タブからphpMyAdminのタブ内「Open phpMyAdmin」をクリック
②phpMyAdminの管理画面で `c9` というDBを作成
※照合順は`utf8mb4_general_ci`を選択

* ターミナルでDB作成する場合
ターミナル上で下記の手順で実行

mysql -u root -p
root [Enterキー]
create database c9;
exit;

2. 隠しファイルを表示
エディタ左側のファイル階層で右クリック→「隠しファイルを表示」

3. .envファイルを編集
cms直下にあるenvファイル内の同じファイルを上書き

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=c9
DB_USERNAME=root
DB_PASSWORD=

4. Webサーバーを再起動
超重要！！！**.envを変更後はWebサーバーを再起動**する

# 起動中のwebサーバーを停止
Ctl + C

# cmsディレクトリにいることを確認後、サーバー起動
php artisan serve

### ④ Laravelの/app/Providers/AppServiceProvider.php ファイルを修正

use Illuminate\Support\Facades\URL;     //この行を追加

public function boot() {

   URL::forceScheme('https');           //この行を追加
   
}

---
## ログイン認証

1. マイグレーションを実行(cmsディレクトリにいるか確認！)
`php artisan migrate`
2. laravel/ui パッケージをインストール
`composer require laravel/ui:^1.0 --dev`
3. artisan コマンドを実行
`php artisan ui vue --auth`
4. npmパッケージをインストール
`npm install`
5. パッケージをビルド
`npm run dev`

---

## 【CRUD】①DBのテーブルを作成 (マイグレーションファイルの作成と実行)
1. booksテーブルを作成（マイグレーションファイル作成）
`php artisan make:migration create_books_table --create=books`

2. database/migrationsの直下のbooks_table.phpに以下追記

public function up()
{
    Schema::create('books', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('item_name');       //追加
        $table->integer('item_number');    //追加
        $table->integer('item_amount');    //追加
        $table->date('published');     //追加
        $table->timestamps();
    });
}

3. マイグレーションを実行（テーブル作成）
ターミナル上でコマンド実行

php artisan migrate

4. phpMyAdminでテーブルが作成されているか確認

## 【CRUD】② Modelを作成（テーブルを簡単に扱えるようにする機能）

1. ターミナルでコマンドを実行

php artisan make:model Book

2. /app/Book.php に作成されたことを確認

## 【CRUD】③ Viewを作成（登録&表示のためのページ）

1. /resources/views/books.blade.php を作成
以下コードを貼り付け

@extends('layouts.app')
@section('content')
    <!-- Bootstrapの定形コード… -->
    <div class="card-body">
        <div class="card-title">
            ブックマーク
        </div>
        
        <!-- ↓バリデーションエラーの表示に使用-->
        
        <!-- ↑バリデーションエラーの表示に使用-->

        <!-- 本登録フォーム -->
        <form action="{{ url('books') }}" method="POST" class="form-horizontal">
            @csrf
            <!-- 本のタイトル -->
            <div class="form-group col-md-6">
                <label for="item_name" class="col-sm-3 control-label">タイトル</label>
                <input type="text" name="item_name" class="form-control" id="item_name">
            </div>

            <!-- 本 登録ボタン -->
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-6">
                    <button type="submit" class="btn btn-primary">
                        Save
                    </button>
                </div>
            </div>
        </form>
    </div>
    <!-- Book: 既に登録されてる本のリスト -->

@endsection

## 【CRUD】④ ルーティング
1. /routes/web.phpに以下の記述を追加

先頭部

use App\Book;
use Illuminate\Http\Request;

中間

// 本のダッシュボード表示(books.blade.php)
Route::get('/', function () {
        return view('books');  //＊＊ ここを修正 ＊＊
});

// ↓ここから追加
// 新「本」を追加
Route::post('/books', function (Request $request) {
    //
});

// 本を削除
Route::delete('/book/{book}', function (Book $book) {
    //
});

2. プレビュー画面で確認
無事に本のタイトルを入力するフォームが表示されていればOK

## 【CRUD】⑤ CRUD機能実装（登録）
1. /routes/web.phpを編集

// 新「本」を追加
Route::post('/books', function (Request $request) {
    $books = new Book;
    $books->item_name = $request->item_name;
    $books->item_number = '1'; // 今は固定値で登録
    $books->item_amount = '1000'; //今は固定値で登録
    $books->published = '2017-03-07 00:00:00'; //今は固定値で登録
    $books->save(); 
    return redirect('/');
});

2. formを送信した後にDBに登録処理ができているか、phpMyAdminで確認

## 【CRUD】⑥ CRUD機能実装（表示）
1. /routes/web.phpを編集

Route::get('/', function () {
    $books = Book::orderBy('created_at', 'asc')->get();
    return view('books', [
        'books' => $books
    ]);
    //return view('books',compact('books')); //も同じ意味
});

2. /resources/views/books.blade.php

< !-- Book: 既に登録されてる本のリスト -->の下に追加

<!-- 現在の本 -->
@if (count($books) > 0)
    <div class="card-body">
        <table class="table table-striped task-table">
            <!-- テーブルヘッダ -->
            <thead>
                <th>本一覧</th>
                <th>&nbsp;</th>
            </thead>
            <!-- テーブル本体 -->
            <tbody>
                @foreach ($books as $book)
                    <tr>
                        <!-- 本タイトル -->
                        <td class="table-text">
                            <div>{{ $book->item_name }}</div>
                        </td>

                        <!-- 本: 削除ボタン -->
                        <td>

                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endif

3. プレビュー画面で、一覧表示できているか確認

---

## 【CRUD追加ワーク】 入力／表示項目を追加
追加ワークとして、今まで1つだけだった登録formの項目を増やしてみましょう

:::success
ステップ
① viewでinputタグを追加
② Routing[web.php]に記載している登録処理の固定値を変更
③ viewで一覧表示するカラムを追加
:::

### ① viewでinputタグを追加
今は「本のタイトル」しか入力項目がありません。
「金額(item_amount)、数（item_number)、公開日(published)」の3項目を追加しましょう

1. view（books.blade.php）を編集

<-- 本登録フォーム -->の<form>タグを上書き

<!-- 本登録フォーム -->
<form action="{{ url('books') }}" method="POST" class="form-horizontal">
    @csrf
    <!-- 本のタイトル -->
    <div class="form-group col-md-6">
        <label for="item_name" class="col-sm-3 control-label">タイトル</label>
        <input type="text" name="item_name" class="form-control" id="item_name">
    </div>
    <!-- 冊数 -->
    <div class="form-group col-md-6">
        <label for="item_number" class="col-sm-3 control-label">冊数</label>
        <input type="text" name="item_number" class="form-control" id="item_number">
    </div>
    <!-- 金額 -->
    <div class="form-group col-md-6">
        <label for="item_amount" class="col-sm-3 control-label">金額</label>
        <input type="text" name="item_amount" class="form-control" id="item_amount">
    </div>
    <!-- 公開日 -->
    <div class="form-group col-md-6">
        <label for="published" class="col-sm-3 control-label">公開日</label>
        <input type="date" name="published" class="form-control" id="published">
    </div>

    <!-- 本 登録ボタン -->
    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-6">
            <button type="submit" class="btn btn-primary">
                Save
            </button>
        </div>
    </div>
</form>

2. プレビュー画面で入力フォーム数が増えているか確認

### ② Routing[web.php]に記載している登録処理の固定値を変更
①でviewを編集し、/booksへPOSTする値を4つ（item_name,item_amount, item_number, published）に増やしました。
次は実際に追加した3つの値をweb.phpで受け取り、DBに登録をしましょう。

1. routes（web.php）の登録処理の部分を編集

Route::post('/books', function (Request $request) {
    // Eloquentモデル（登録処理）
    $books = new Book;
    $books->item_name =    $request->item_name;
    $books->item_number =  $request->item_number; //ここを変更
    $books->item_amount =  $request->item_amount; //ここを変更
    $books->published =    $request->published; //ここを変更
    $books->save(); 
    return redirect('/');
});

2. 実際にDBに登録できるか確認
プレビュー画面で4項目入力
→ phpMyAdminでテーブルに値が入っているか確認しましょう

---

:::success
これでLaravel01の復習は終わりです。おつかれ様でした！ :raised_hands::raised_hands::raised_hands:
:::