HTML Laravel　動的ページのデザインについて

環境

PHP 5.6
MySQL 5.7
Laravel 5.1
CentOS

実現したいこと

お世話になっております。
現在、簡単なWebサイトをPHPのLaravelというフレームワークを使って開発しております。

View側のコード　'Laravel'/resources/views/'sample'/index.blade.php
は現在以下の様になっています。

php
1    @foreach ($datas as $data)
2    <div class="card mb-2">
3      <div class="card-body">
4        <h4 class="card-title">{{ $data->id }}</h4>
5        <h6 class="card-subtitle mb-2 text-muted">{{ $data->name }}</h6>
6      </div>
7    </div>
8    @endforeach

コントローラー側でデータベースの全レコードを取得して、このViewに$datasとして渡しています。

上のコードだとブラウザからアクセスした時に、データベースのテーブルに登録されている分だけ縦にidとnameがズラッと並んで表示されるのですが、これをiphoneのアプリアイコンの様なデザインに変えたいです。

もう少し具体的には、データベースのテーブルにイベントの名前を登録しておいて、さっきの画面にボタンを配置してそのボタン１つにつきイベント１つを割り当ててボタンを押したらそのイベントの詳細が別のページで表示されるイメージです。

リストのページに載せたいイベントが３つであれば、画面いっぱいの大きさに合わせたボタンが３つ。イベントが６つであれば、画面を上下に２分割して上部にボタン３つ下部にボタン３つを同じ大きさ幅で表示されるようにしたいです。

イベントはイベントリストのページでそのイベントのボタンが押されたら、開催日時や場所、内容等を別の画面に表示させたいです。

イベントの一覧の画面で、例えば　運動大会、グルメまつり、夜景スポットのようなイベント名が書かれたボタンが並んでいて、そこを押したら別のイベント詳細ページで具体的な情報が表示されるイメージです。

このイベント一覧に表示させたいイベントの数（ボタンの数）が結構な頻度で変わるので、その変更が来る度に画面の余白などのレイアウトを修正していたら時間がかかってしまうので、何とかイベントの数に応じてボタンの大きさなどが数に応じて変わる様な処理を書きたいです。

質問が分かり辛いかもしれませんが、お力を貸して下さい。
よろしくおねがいします。

m.ts10806

2018/07/06 02:16

「きれいにデザイン」というと個人の感覚によるものが大きいと思います。i,iiであげられている「実現したいこと」はその「きれいにデザイン」に該当するものでしょうか。「きれいに」部分をもう少し具体化していただけると助かります。難しいようでしたら画面イメージ添付でも構いません。

m.ts10806

2018/07/06 02:17

いずれにしてもhtml自体は静的なものなので、「件数に応じて」のように「動的」な表示をさせるのでしたらblade側にPHPロジックを書いていくことになります。

AbcdefgFirst

2018/07/06 02:41

ご回答ありがとうございます。もう少し具体的には、データベースのテーブルにイベントの名前を登録しておいて、さっきの画面にボタンを配置してそのボタン１つにつきイベント１つを割り当ててボタンを押したらそのイベントの詳細が別のページで表示されるイメージです。

AbcdefgFirst

2018/07/06 02:43

さっきの画面はイベントのリストの様なページです。そのボタン１つ１つのデザインはiphoneのアプリアイコンの様なものを作りたいです。

m.ts10806

2018/07/06 02:44

質問は編集できるので要件として質問本文に追記いただけますか？こちらのコメント欄はデフォルト非表示なので他の見ている人の目に付きにくくなります。

AbcdefgFirst

2018/07/06 02:46

リストのページに載せたいイベントが３つであれば、画面いっぱいの大きさに合わせたボタンが３つ。イベントが６つであれば、画面を上下に２分割して上部にボタン３つ下部にボタン３つを同じ大きさ幅で表示させたいです。

AbcdefgFirst

2018/07/06 02:49

申し訳ありません。本文を編集して投稿します。

m.ts10806

2018/07/06 02:51

「イベントとはいったい何ものか」というところも追記していただければと思います（テーブル構造と、サンプルデータがあれば更に助かります）

行動規範の内容に同意します

回答2件

テーブルを使ってループで作成してみては？

<a>タグでボタン風にCSSを組めば実現できそうですね。

簡単に書くと

blade
1    <table>
2        @for($i = 0; $i < count($datas); $i++)
3            @switch($i % 3)
4                @case(0)
5                    <tr><td><a href="{{$datas[$i]->url}}">{{$datas[$i]->title}}</a></td>
6                    @break
7                @case(1)
8                    <td><a href="{{$datas[$i]->url}}">{{$datas[$i]->title}}</a></td>
9                    @break
10                @case(2)
11                    <td><a href="{{$datas[$i]->url}}">{{$datas[$i]->title}}</a></td></tr>
12                    @break
13            @endswitch
14        @endfor
15    </table>