Laravelで簡単なメモアプリを作る（2）~データの取得と保存~

はじめに

Laravelとは、Webに特化したPHPフレームワーク。セキュリティ対策(CSRF対策など)もこれでできます。MVCアーキテクチャを採用しています。今回は、データベースの接続とデータの取得と保存をしていきたいと思います。

Laravelで簡単なメモアプリを作る（1）~Viewの作成と表示~
Laravelで簡単なメモアプリを作る（3）~データの更新と削除~

今回の目標物

データ取得の流れ

データベースの作成

データベースの作成

phpMyAdminを開く。Newを押して、新しくdatabaseを作成する。今回は、memoAppという名前のデータベースを作成する。

データベースの接続

.envに、データベースの情報を記述する。DB_DATABESEには、データベースの名前を入れる。MAMPを使っている人は、デフォルトでユーザー名、パスワード共にrootなので特に設定していなければ、下の内容をそのままコピー＆ペーストして良い。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=memoApp
DB_USERNAME=root
DB_PASSWORD=root

モデルの作成

ターミナルまたは、PowerShellを開き、cdコマンドでmemoAppまで移動し、下のコマンドを打ち込む。

$ php artisan make:model Memo

先ほど作成したモデルにDBのテーブル情報を記述する。

app/Memo.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Memo extends Model
{
    // table名を指定
    protected $table = 'memo';

    // カラムを指定
    protected $fillable = [
        'id', 'title', 'content'
    ];

    // created_atを使わない場合はfalseを指定する。
    public $timestamps = false;
}

テーブルの作成

マイグレーションファイルの作成

ターミナルまたはpowerShellを開いて、cdコマンドでmemoAppまで移動し、下のコマンドを打つ。

$ php artisan make:migration create_memo_table

先ほど、生成したファイルにカラムの情報を記述する。

id : bigInt型
title : string型 24桁
content: string型 60桁

database/migrations/2019_12_12_114638_create_memo_table.php

<?php

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

class CreateMemoTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('memo', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title', 24);
            $table->string('content', 60);
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('memo');
    }
}

seederの作成

ターミナルまたはpowerShellを開いて、cdコマンドでmemoAppまで移動し、下のコマンドを打つ。

$ php artisan make:seeder MemoTableSeeder

database/seeds/MemoTableSeeder.php

<?php

use Illuminate\Database\Seeder;

use App\Memo;

class MemoTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        DB::table('memo')->delete(); //最初に全件削除

        Memo::create([
            'title' => '12/13 laravel勉強会', 'content' => 'データの読み取りと追加をやりました。'
        ]);

        Memo::create([
            'title' => '12/6 laravel勉強会', 'content' => 'Viewの表示をしました。'
        ]);
    }
}

database/seeds/DatabaseSeeder.php

<?php

use Illuminate\Database\Seeder;
use Illuminate\Database\Eloquent\Model;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        Model::unguard();

        $this->call('MemoTableSeeder');

        Model::reguard();
    }
}

マイグレーションとSeederの反映

phpMyAdminにマイグレーションとSeederを反映させる。ターミナルまたはpowerShellを開いて、cdコマンドでmemoAppまで移動し、下のコマンドを打つ。

$ php artisan migrate --seed

phpMyAdminを開いて、反映されているかどうか確認する。

ちなみに、エクセル形式で表すとこんな感じになる。

データの取得

データをViewに渡す

app/Http/Controllers/MemoController.phpに、データをViewに渡すメソッドを記述する。

app/Http/Controllers/MemoController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Memo;

class MemoController extends Controller
{
    public function showHome()
    {
        $memos = Memo::get();
        return view("home", ['memos' => $memos]);
    }

    public function showSubmit()
    {
        return view("submit");
    }
}

とりあえずresources/views/home.blade.phpの適当なところに<div>{{$memos}}</div>を入れて、表示を確認してみよう。

$memosの中身が、id,title,contentの要素を持つオブジェクトの配列になっていることがわかる。

resources/views/home.blade.phpの適当なところに以下のコードを追加してみる。

<div>{{$memos[0]->id}}</div>
<div>{{$memos[0]->title}}</div>
<div>{{$memos[0]->content}}</div>

ループを使わずにこんな感じで表示してみよう。

home.blade.php

<tbody>
  <tr>
    <td class="left">{{$memos[0]->title}}</td>
    <td><a href="{{ route('submit')}}">編集</a></td>
    <td><a>削除</a></td>
  </tr>
  <tr>
    <td class="left">{{$memos[1]->title}}</td>
    <td><a href="{{ route('submit')}}">編集</a></td>
    <td><a>削除</a></td>
  </tr>
</tbody>

これをループを用いて、記述するとこんな感じになる。

resources/views/home.blade.php

<tbody>
   @foreach ($memos as $memo)
     <tr>
       <td class="left">{{$memo->title}}</td>
       <td><a href="{{ route('submit')}}">編集</a></td>
       <td><a>削除</a></td>
     </tr>
   @endforeach
</tbody>

bladeファイルはhtmlファイルと違って、@を使うことで直接、条件分岐やループ文を記述することができる。中括弧で囲む必要がないが@endifや@endforなどで閉じてやる必要がある。

詳細画面にもデータを渡す

URLからメモのidを受け取れるようにする。URLを‘/submit/{id?}’にすることで、idという変数をコントローラに渡すことができる。

routes/web.php

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('sample');
});

Route::get('/home', 'MemoController@showHome')->name('home');

Route::get('/submit/{id?}', 'MemoController@showSubmit')->name('submit');

リンクを押すと、URLにidを含んだページに飛べるようにする。href="{{ route('submit', ['id' => $memo->id])}}"とすることで、URLにidを渡すことができる。

resources/views/home.blade.php

@extends('layouts.app')

@section('css')
<style>
    header {
        height: 50px;
        background-color: #000;
        color: white;
        padding-left: 20px;
        font-size: large;
        color: #ddd;
    }

    .title {
        position: absolute;
        top: 10px;
    }

    .card {
        margin-top: 40px;
    }

    .left {
        width: 70%;
    }

    .submit {
        position: absolute;
        top: 10px;
        right: 20px;
    }
</style>
@endsection

@section('content')
<div class="card" style="width: 100%;">
    <div class="card-header">
        メモ一覧
        <a href="{{ route('submit')}}" class="submit">メモを追加</a>
    </div>

    <table class="table">
        <tbody>
            @foreach ($memos as $memo)
            <tr>
                <td class="left">{{$memo->title}}</td>
                <td><a href="{{ route('submit', ['id' => $memo->id])}}">編集</a></td>
                <td><a>削除</a></td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection

コントローラーの関数の引数に、URLの変数を渡せる。

app/Http/Controllers/MemoController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Memo;

class MemoController extends Controller
{
    public function showHome()
    {
        $memos = Memo::get();
        return view("home", ['memos' => $memos]);
    }

    public function showSubmit($id = 0)
    {
        if ($id != 0) {
            $memo = Memo::where('id', $id)->get()->first();
        } else {
            $memo = (object) ["id" => 0, "title" => "", "content" => ""];
        }
        return view("submit", ['memo' => $memo]);
    }
}

コントローラから送られてきたデータを、Viewに埋め込む。

resources/views/submit.blade.php

@extends('layouts.app')

@section('css')
<style>
    header {
        height: 50px;
        background-color: #000;
        padding-left: 20px;
        font-size: large;
        color: #ddd;
    }

    .title {
        position: absolute;
        top: 10px;
    }

    .container {
        margin-top: 40px;
    }
</style>
@endsection

@section('content')
<form>
    <div class="form-group">
        <label for="title">タイトル</label>
        <input type="text" class="form-control" id="title" name="title" value="{{$memo->title}}">
    </div>
    <div class="form-group">
        <label for="content">内容</label>
        <input type="text" class="form-control" id="content" name="content" value="{{$memo->content}}">
    </div>
    <a href="{{ route('home')}}" class="btn btn-primary">戻る</a>
    <button type="submit" class="btn btn-success">追加</button>
</form>
@endsection

データの保存

postを使って、データをコントローラに送る。

resources/views/submit.blade.php

@extends('layouts.app')

@section('css')
<style>
    header {
        height: 50px;
        background-color: #000;
        padding-left: 20px;
        font-size: large;
        color: #ddd;
    }

    .title {
        position: absolute;
        top: 10px;
    }

    .container {
        margin-top: 40px;
    }
</style>
@endsection

@section('content')
<form method="POST" action="{{ route('submit', ['id' => $memo->id])}}">
    @csrf
    <div class="form-group">
        <label for="title">タイトル</label>
        <input type="text" class="form-control" id="title" name="title" value="{{$memo->title}}">
    </div>
    <div class="form-group">
        <label for="content">内容</label>
        <input type="text" class="form-control" id="content" name="content" value="{{$memo->content}}">
    </div>
    <a href="{{ route('home')}}" class="btn btn-primary">戻る</a>
    <button type="submit" class="btn btn-success">追加</button>
</form>
@endsection

MemoControllerに、Viewから送られてきたデータをデータベースに保存するメソッドを記述する。

app/Http/Controllers/MemoController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Memo;

class MemoController extends Controller
{
    public function showHome()
    {
        $memos = Memo::get();
        return view("home", ['memos' => $memos]);
    }

    public function showSubmit($id = 0)
    {
        if ($id != 0) {
            $memo = Memo::where('id', $id)->get()->first();
        } else {
            $memo = (object) ["id" => 0, "title" => "", "content" => ""];
        }
        return view("submit", ['memo' => $memo]);
    }

    public function postSubmit(Request $request, $id = 0)
    {
        $title = $request->input('title');
        $content = $request->input('content');
        if ($id == 0) {
            Memo::create([
                'title' => $title,
                'content' => $content
            ]);
        }
        return redirect()->route('home');
    }
}

web.phpに以下の内容を記述する。

routes/web.php

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('sample');
});

Route::get('/home', 'MemoController@showHome')->name('home');

Route::get('/submit/{id?}', 'MemoController@showSubmit')->name('submit');

Route::post('/submit/{id?}', 'MemoController@postSubmit')->name('submit');

今回はここまで。次回は、データの編集と削除をしたいと思います。