副業におすすめなサイトを見る→

Laravelでforeachを使ってテーブルを作成する手順を解説

Laravelでforeachを使ってテーブルを作成する手順を解説

アプリリリースのお知らせ

予定を探すアプリyoteipickerをリリースしました。

アプリの利用用途:暇だから何か予定入れたいけど今週の土日は何しようかな〜?ってときに使えるアプリです。

Laravelでforeachを使ってテーブルを作成するにはどうすればいいの?

こんな疑問を解決します。

Laravelで表を作成したいけど、どうやって作成すればいいのかわからないって疑問に思いますよね。

この記事では、foreachを使ってテーブルを作成する方法を解説します。

foreachの基本的な使い方やEloquesntについても少し解説しているのでぜひ参考にしてくださいね。

本記事のゴール
  • foreachを使ってテーブルを作成する方法がわかる

>>ココナラと似てるおすすめの副業サイトを確認する

>>リモートワークもあるおすすめの転職サイトを確認する

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

Contents

動作確認した開発環境

Docker 20.10.7
PHP 7.4.22
Laravel 8.53.1
mySQL 5.7
データベースのツール phpmyadmin
※bootstrapを導入しています

この記事を進める前提として、すでにLaravelのアプリを作成し、データベースとも接続しているとします。

想定するアプリ

想定しているのは、本を管理するアプリです。

こんな感じのテーブルを作成します。

今回テーブルで使うbooksテーブルは以下のような構造になっています。

この記事で解説しないこと

  • 環境構築
  • マイグレーションの作成
  • データベース関連
  • bootstrapの導入方法

なので、Laravelでforeachを使ってテーブルを作成する方法に特化して解説します。

Laravelでforeachを使ってテーブルを作成

まずは完成のコードです。

<table class="table table-striped">
  <thead>
    <tr>
      <th>ブックナンバー</th>
      <th>ブック名</th>
      <th>作成日</th>
    </tr>
  </thead>
  <tbody>
    @foreach ($books as $book)
    <tr>
      <td>{{ $book->book_id }}</td>
      <td>{{ $book->book_name }}</td>
      <td>{{ $book->created_at }}</td>
    </tr>
    @endforeach
  </tbody>
</table>

テーブルでthead,tr,th,tbody,tdってなに?となっている人は、「HTML テーブル」などと調べて理解深めてください!

またここで$booksが登場していますが、$booksはコントローラーでこのように定義しています。

    /**
     * 一覧画面
     */
    public function index()
    {
        // 本の一覧データを取得
        $books = Book::all();
        return view('book.index', compact('books'));
    }

このコードのポイントは、ここです。

  <tbody>
    @foreach ($books as $book)
    <tr>
      <td>{{ $book->book_id }}</td>
      <td>{{ $book->book_name }}</td>
      <td>{{ $book->created_at }}</td>
    </tr>
    @endforeach
  </tbody>

すでにforeachの使い方を知っている人はイメージつくかもしれませんが、foreach構文を使って$booksから一つずつデータを取り出しています。

ここで簡単にforeachについて解説します。

foreachは配列の要素を取り出して先頭から順番に処理していくのでした。

@php
  $data = ['たろう', 'じろう', 'さぶろう'];
@endphp
@foreach ($data as $value)
  {{ $value }}
@endforeach

たろう じろう さぶろう

コントローラーで定義した$booksは、laravelのEloquestを用いて、データベースからデータを取得しています。

Book::all()の部分がそうですね。(参考:Laravel公式ドキュメントのEloquent)

::all()とすることで、モデルに関連づけたデータベースのテーブルからレコードを全て取得します。

つまり、Book::all()は、booksテーブルから全てのレコードを取得することを意味してるんですね。

現在、私の動作環境のデータベースにはbooksテーブルに3件データが投入されています。

$books = Book::all()で上記の全てのデータを取得できます。

dd関数を使って$booksの中身を確認してみます。

    /**
     * 一覧画面
     */
    public function index()
    {
        // 本の一覧データを取得
        $books = Book::all();
        dd($books);
        return view('book.index', compact('books'));
    }

このようにデータが確認できます。

さて、テーブルに話を戻すと以下のようになっています。

  <tbody>
    @foreach ($books as $book)
    <tr>
      <td>{{ $book->book_id }}</td>
      <td>{{ $book->book_name }}</td>
      <td>{{ $book->created_at }}</td>
    </tr>
    @endforeach
  </tbody>

$book->book_id,$book->book_nameとすることで、それぞれのカラムのデータに接続できます。

このようにforeachを使うことで、配列要素が順番に取り出されて、データ数に応じてtbodyがどんどん作られていきます。

それによって以下のようなテーブルになるんですね。

【まとめ】Laravelでforeachを使ってテーブルを作成する方法

この記事では、Laravelでforeachを使ってテーブルを表示させる方法を解説しました。

途中、Eloquentやforeachの解説を簡単に解説してきましたが、PHPやLaravelの基礎を押さえていれば理解できます。

Laravelの公式ドキュメントや参考書などを読み込んで、アプリ開発に励みましょう!

参考:
Laravel公式ドキュメント

>>ココナラと似てるおすすめの副業サイトを確認する

>>リモートワークもあるおすすめの転職サイトを確認する

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

スキルを売り買いするならココナラ

コメント

コメントする

CAPTCHA


Contents
閉じる