現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

  1. バックエンド
  2. 6277 view

Laravelのリクエスト(Request)を処理してみよう！

最終更新日:2019/04/02

本記事では、ブログ投稿システムを作りながらLaravelのリクエストの処理方法をわかりやすく解説していきます。

以下の記事の続きです。まだ読んでいない方はぜひご一読ください！

Laravelのリソースコントローラを理解して使ってみよう！
本記事では、Laravelのリソースコントローラとは何かをわかりやすく解説していきます。以下の記事の続きです。まだ読んでいない方はぜひご一読ください！初心者の方でもLaravelの動作環境を簡単に作れるWINDIIオリジナルのソースコードを用意したので、実際に動かし...

初心者の方でもLaravelの動作環境を簡単に作れるWINDIIオリジナルのソースコードを用意したので、実際に動かして学ぶとより深く理解できるようになります！

以下の記事を参考にご活用ください。

Laravelを簡単に動かせるスターターキットを作成しました！
Laravelを簡単に動かせるスターターキットを作成しました?当サイトでLaravelの動作を説明するときなど積極的に使っていきます！GitHubのレポジトリはこちらから使い方Git、Dockerがすでに入っていることを前提とします。git clone https://github.com/windii-legend/...

新規投稿機能を実装する

それでは、まず新規投稿機能を作ってみましょう。

最初に投稿画面から作っていきます。

resources/views/articles/create.blade.php　を作成して以下のようにします。

@extends('layouts.app')

@section('title', '新規投稿')

@section('content')
<div>
  <form>
    <div class="form-group">
    <label for="exampleFormControlInput1">タイトル</label>
      <input type="text" class="form-control" name="title">
    </div>
    <div class="form-group">
    <label for="exampleFormControlTextarea1">本文</label>
      <textarea class="form-control"rows="5" name="content"></textarea>
    </div>
    <input type="submit" class="btn btn-primary" value="投稿"/>
  </form>
</div>
@endsection

次にapp/Http/Controllers/ArticleController.php のcreate()メソッドを以下のようにします。

public function create()
{
    return view('articles.create');
}

この状態でhttp://localhost:8000/articles/create にアクセスすると以下のように表示されます。

画面は完了ですね。次に投稿を保存する機能を作っていきましょう。

まずは先ほど作ったformを以下のように修正します。

<form method="POST" action="/articles">

新規追加のルートは[POST] /articlesですので、method=”POST” action=”/articles”　を記述します。

またformの直下に@csrf　という記述を追加しましょう。
(csrfについてはここでは省略しますが、セキュリティ対策のためです）

@extends('layouts.app')

@section('title', '新規投稿')

@section('content')
<div>
  <form method="POST" action="/articles">
    @csrf
    ...省略...
  </form>
</div>
@endsection

app/Http/Controllers/ArticleController.php のstore()メソッドを以下のようにします。

public function store(Request $request)
{
    $article = new Article;
    $article->title = $request->title;
    $article->content = $request->content;
    $article->save();
}

$request にはフォームから渡ってきた情報が乗っかっています。Eloquentモデル（ここではArticle)を生成して渡しています。
最後にsave()メソッドを呼び出せば記事の保存ができます。

試しにこんな感じで投稿してみましょう。
投稿した後画面が白くなりますが気にしないでください。あとで対処します。

http://localhost:8080　を開いてデータベースをみてみると以下のようにデータが保存されているはずです。

とりあえず投稿機能は完成ですね。

投稿一覧機能を実装する

それでは、投稿一覧を表示していきましょう。

app/Http/Controllers/ArticleController.php　のindex()メソッドを以下のようにします。

public function index()
{
    $articles = Article::orderBy('created_at', 'desc')->get();
    return view('articles.list')->with(['articles' => $articles]);
}

投稿が新しい順に記事一覧を取得して、ビューに渡しています。

それでは投稿一覧を表示するビューを作成します。

resoureces/views/article/list.blade.php

@extends('layouts.app')

@section('title', '投稿記事一覧')

@section('content')

<a href="/articles/create" class="btn btn-primary">新規投稿</a>
@if(count($articles) > 0)
  @foreach($articles as $article)
    <a href="/articles/{{$article->id}}">
      <div class="card my-3">
        <div class="card-body">
          <h5 class="card-title">{{$article->title}}</h5>
          <small>投稿日:{{($article->created_at)->format('Y/m/d')}}</small><br/>
          <small>更新日:{{($article->updated_at)->format('Y/m/d')}}</small>
          <p class="card-text">{{$article->content}}</p>
        </div>
      </div>
    </a>
  @endforeach
@endif
@endsection

作成できたら、http://localhost:8000/articles にアクセスしてみましょう。以下のように表示されているはずです。

記事一覧自体はこれで完了なのですが、先ほどの、投稿したあと画面が白くなる問題を解消しましょう。

app/Http/Controllers/ArticleController.php　のstore() メソッドを以下のようにします。

public function store(Request $request)
{
    $article = new Article;
    $article->title = $request->title;
    $article->content = $request->content;
    $article->save();
    // 追加
    return redirect("/articles");
}

http://localhost:8000/articles/create　を開いて以下のような感じで新規投稿してみます。

投稿ボタンを押すと、以下の画面にリダイレクトされるようになりました！?

投稿詳細機能を実装する

それでは、投稿詳細ページを作っていきます。とは言ってもこれはすぐ終わってしまいます。

app/Http/Controllers/ArticleController.phpのshow()メソッドを以下のようにします。

public function show(Article $article)
{
    return view('articles.detail')->with('article', $article);
}

それでは先ほどと同じ流れでビューを作ります。

resources/views/articles/detail.balde.phpを作成して以下のようにします。

resources/views/articles/detail.balde.php

@extends('layouts.app')

@section('title', $article->title)

@section('content')
    <div class="card my-3">
      <div class="card-body">
        <h5 class="card-title">{{$article->title}}</h5>
        <small>投稿日:{{($article->created_at)->format('Y/m/d')}}</small><br/>
        <small>更新日:{{($article->updated_at)->format('Y/m/d')}}</small>
        <a href="/articles/{{$article->id}}/edit">編集</a>
        <p class="card-text">{{$article->content}}</p>
      </div>
    </div>
@endsection

これでhttp://localhost:8000/articles/〇〇で投稿個別ページが表示されるようになります。

投稿編集機能を実装する

それでは編集機能を作っていきます。

resources/views/articles/edit.blade.php を作成して以下のようにします。

@extends('layouts.app')

@section('title', '投稿編集')

@section('content')
<div>
  <form action="/articles/{{$article->id}}" method="POST">
    @method('PUT')
    @csrf
    <div class="form-group">
    <label for="exampleFormControlInput1">タイトル</label>
      <input type="text" class="form-control" name="title" value="{{$article->title}}">
    </div>
    <div class="form-group">
    <label for="exampleFormControlTextarea1">本文</label>
      <textarea class="form-control"rows="5" name="content">{{$article->content}}</textarea>
    </div>
    <input type="submit" class="btn btn-primary" value="更新"/>
  </form>
</div>
@endsection

ほとんど新規投稿と同じですが、編集するタイトルと本文をセットしているのが異なります。

次にコントローラです。

app/Http/Controllers/ArticleController.php のupdate() メソッドを以下のようにします。

public function update(Request $request, Article $article)
{
    $article->title = $request->title;
    $article->content = $request->content;
    $article->save();
    return redirect("/articles/{$article->id}");
}

新規投稿の場合とほぼ同じですが、リダイレクト先に個別記事を指定します。

こんな感じで保存すると、

ちゃんと保存されましたね。?

投稿削除機能を実装する

最後に削除機能です。

resources/views/articles/edit.blade.php に削除を追加しましょう。

@extends('layouts.app')

@section('title', '投稿編集')

@section('content')
<div>
  <form action="/articles/{{$article->id}}" method="POST">
    @method('PUT')
    @csrf
    <div class="form-group">
    <label for="exampleFormControlInput1">タイトル</label>
      <input type="text" class="form-control" name="title" value="{{$article->title}}">
    </div>
    <div class="form-group">
    <label for="exampleFormControlTextarea1">本文</label>
      <textarea class="form-control"rows="5" name="content">{{$article->content}}</textarea>
    </div>
    <input type="submit" class="btn btn-primary" value="更新"/>
  </form>
  <form action="/articles/{{$article->id}}" method="POST">
    @method('DELETE')
    @csrf
    <input type="submit" class="btn btn-danger mt-3" value="削除"/>
  </form>
</div>
@endsection

次にコントローラです。

app/Http/Controllers/ArticleController.php のdestroy() メソッドを以下のようにします。

public function destroy(Article $article)
{
    $article->delete();
    return redirect('/articles');
}

これだけです！削除を実行してみましょう。

記事が削除されていれば完了です。?

まとめ

これでブログ投稿機能は一通り完了です！

次回はバリデーションについてです！

Laravelのバリデーション(Validation)を使ってみよう！
本記事では、ブログ投稿システムを作りながらLaravelのバリデーションの使い方をわかりやすく解説していきます。以下の記事の続きです。まだ読んでいない方はぜひご一読ください！初心者の方でもLaravelの動作環境を簡単に作れるWINDIIオリジナルのソースコードを用...
The following two tabs change content below.
WINDII

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

バックエンドの最近記事

  1. 人気急上昇中のLaravelをはじめよう！【徹底解説】

  2. Laravelの認可を理解して実装してみよう！

  3. Laravelのシーティング(Seeding)機能をマスターしよう！

  4. Laravelのメール確認機能を設定してみよう！

  5. Laravelの認証機能を設定してみよう！

関連記事

  1. LaravelのEloquentモデルを理解して使ってみよう…

  2. Laravelの認可を理解して実装してみよう！

  3. Laravelのマイグレーションを理解して使ってみよう！

  4. Laravelの認証機能を設定してみよう！

  5. Laravelのシーティング(Seeding)機能をマスター…

  6. Laravel5.6で掲示板システムを作るチュートリアル

コメント

  1. アバター
    • tomo
    • 2019年 7月 16日

    初めまして。tomoと申します。
    Laravelの投稿記事参考にさせてもらってます。
    質問があるのですが、よろしいでしょうか？？

    Requestの「投稿編集機能」と「投稿削除機能」の実装が上手くいかないです。
    具体的には、「投稿一覧機能」から編集をクリックしてedit.blade.phpへジャンプして、編集また削除をするかと思うのですが、
    edit.blade.phpへジャンプしても白い画面になってしまいます。
    何が原因から分かりますでしょうか？？

  1. この記事へのトラックバックはありません。

PAGE TOP