More than 3 years have passed since last update.

【Laravel】課題：26章演習課題日記帳アプリの作成

Laravel

Last updated at 2021-07-08Posted at 2021-06-28

手順

プロジェクトの作成

以下のコマンドを打つ

cd ~/environment
composer create-project laravel/laravel laravel_diary --prefer-dist 6.*

.envの修正

（省略）
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_diary_development
DB_USERNAME=root
DB_PASSWORD=secret

タイムゾーンの修正

'timezone' => 'UTC',

ロケールの変更

'locale' => 'en',

TrustProxies ミドルウェアの修正

app/Http/MiddleWare/TrustProxies.php

protected $proxies = '*'; // 全てのプロクシを信頼する。

データベースの作成

phpMyAdminからlaravel_diary_developmentを作成。

照合順序はutf8mb4_unicode_ciを選択。

データベースの動作確認

php artisan migrate

「Migration table created successfully. 」から始まるメッセージが表示されればOK。

コントローラーの作成

cd laravel_diary

php artisan make:controller DiaryControlller

モデルの作成＆マイグレーションの作成


cd ~/environment/laravel_diary

php artisan make:model Diary --migration

ルーティング

/laravel_diary/routes/web.php

<?php
Route::get('/diaries', 'DiaryControlller@index');

Route::get('/diaries/create', 'DiaryControlller@create');

Route::post('/diaries', 'DiaryControlller@store');

Route::get('/diaries/{id}/edit', 'DiaryControlller@edit');

Route::patch('/diaries/{id}', 'DiaryControlller@update');

Route::delete('/diaries/{id}', 'DiaryControlller@destroy');

コントローラー

/laravel_diary/app/Http/Controllers/DiaryControlller.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Diary;

use App\Http\Requests\DiaryRequest;

class DiaryControlller extends Controller
{
    public function index(){
        $diaries = Diary::all();
        return view('diary.index', [
        'title' => '日記一覧',
        'diaries' => $diaries,
      ]);
    }
    
    public function create(){
        return view('diary.create', [
        'title' => '日記一覧',
      ]);
    }
    
    public function store(DiaryRequest $request){
        Diary::create(
        $request->only([
                'title',
                'log'
            ])
        );
        session()->flash('success', '日記を追加しました！');
        return redirect('/diaries');
        
    }
    
    public function edit(int $id){
        $diary = Diary::find($id);
        
        return view('diary.edit', [
           'title' => '日記編集',
           'diary' => $diary,
        ]);
    }
    
    public function update(int $id, DiaryRequest $request){
        $diary = Diary::find($id);
        $diary->update($request->only(['title', 'log']));
        session()->flash('success', '日記を更新しました！');
        return redirect('/diaries');
        
    }
    
    public function destroy(int $id){
        $diary = Diary::find($id);
        $diary->delete();
        session()->flash('success', '日記を削除しました！');
        return redirect('/diaries');
    }
}

モデル

/laravel_diary/app/Diary.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Diary extends Model
{
    public $fillable = ['title', 'log'];
}

マイグレーションファイル

/laravel_diary/database/migrations/2021_06_25_224044_create_diaries_table.php

<?php

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

class CreateDiariesTable extends Migration
{
    public function up()
    {
        Schema::create('diaries', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title', 100);
            $table->string('log', 2000);
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('diaries');
    }
}

一覧画面のビュー

/laravel_diary/resources/views/diary/index.blade.php

@extends('layouts.default')

@section('title', $title)

@section('content')
<h1 class = "title" >日記一覧画面</h1>

<div class = "box">

    <a href="{{ url('/diaries/create') }}">新規投稿</a>

    <div>
        
    @forelse($diaries as $diary)
        <div class = "diary">
            <p>{{ $diary->title }} {{ $diary->created_at}}</p>
            <p>{{ $diary->log }}</p>
            <a href="{{ url('/diaries/' . $diary->id . '/edit') }}">編集</a>
            <form action="{{ url('/diaries/' . $diary->id) }}" method="post">
              @csrf
              @method('DELETE')  
                <input type="submit" value="削除">
            </form>
        </div>
    @empty
    
    <p>日記がありません。</p>
    
    @endforelse
    
    </div>
</div>

@endsection

新規投稿画面のビュー

/laravel_diary/resources/views/diary/create.blade.php

@extends('layouts.default')

@section('title', $title)

@section('content')
<h1>日記追加画面</h1>
<a href="{{ url('/diaries') }}">一覧に戻る</a>

<form method="post" action="{{ url('/diaries') }}">
  @csrf
  
  <div>
    <label>
      タイトル：
      <input type="text" name="title" placeholder="日記のタイトルを入力">
    </label>
  </div>
  
  <div>
    <label>
      <textarea type="text" name="log" placeholder="内容を入力" rows="5" cols="80"></textarea>
    </label>
  </div>
  
  <input type="submit" value="保存">

</form>
@endsection

編集画面のビュー

/laravel_diary/resources/views/diary/edit.blade.php

@extends('layouts.default')

@section('title', $title)

@section('content')
<h1>日記編集画面</h1>
<a>一覧に戻る</a>

<form action="{{ url('/diaries/' . $diary->id) }}" method="post">
  @csrf
  @method('PATCH')
  <div>
    <label>
      タイトル：
      <input type="text" name="title"  value = "{{$diary->title}}" placeholder="日記のタイトルを入力">
    </label>
  </div>
  <div>
    <label>
      <textarea type="text" name="log" placeholder="内容を入力">{{$diary->log}}</textarea>
    </label>
  </div>

  <input type="submit" value="保存">
</form>

@endsection

デフォルトテンプレートのビュー