見出し画像

Laravelでテストデータを用意し、ペジネーションと並び替えを実装

ユーザーのテストデータを用意し、DBに保存→画面表示し、ペジネーションを追加してみます。完成イメージはこんな感じ。

さらに、Name, Mail, Ageをクリックするとその順番で並び替えられるようにしていきます😊

スクリーンショット 2020-01-02 13.44.41

参考

これは、「PHPフレームワーク Laravel入門 」を参考に作成したので気になる方はぜひ買ってみてください!🙌

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

$ php artisan make:migration create_people_table

これで生成された[日時]_create_people_table.phpファイルにテーブル生成の処理を追加していきます。

    public function up()
   {
       Schema::create('people', function (Blueprint $table) {
           $table->increments('id');
           $table->string('name');
           $table->string('mail');
           $table->integer('age');
           $table->timestamps();
       });
   }

シーダーファイルの作成

テストデータを用意するためにシーダーファイルを作成します。

$ php artisan make:seeder PeopleTableSeeder

これでsrc/database/seeds/PeopleTableSeeder.phpが生成されるので、テストデータを追加します。ここではtaroさんを追加しています。

use Illuminate\Support\Facades\DB; // 追記
class PeopleTableSeeder extends Seeder
{
   public function run()
   {
       $param = [
           'name' => 'taro',
           'mail' => 'taro@yamada.jp',
           'age' => 12,
       ];
       DB::table('people')->insert($param);
   }
}

シーダーファイルの登録

今用意したシーダーファイルをデータベースに反映させるために src/database/seeds/DatabaseSeeder.phpに下記を登録

    public function run()
   {
       $this->call(PeopleTableSeeder::class);
   }

そして、シードを実行🎈

$ php artisan db:seed

これで、先ほど登録したtaroさんの情報がDBに登録されました!

スクリーンショット 2020-01-02 11.58.08

次は、index.blade.phpファイルを修正することで、データを画面に表示させていきます〜

    <table>
       <tr>
           <th>Name</th>
           <th>Mail</th>
           <th>Age</th>
       </tr>
       @foreach ($items as $item)
           <tr>
               <td>{{$item->name}}</td>
               <td>{{$item->mail}}</td>
               <td>{{$item->age}}</td>
           </tr>
       @endforeach
   </table>

ここのitemsはsrc/app/Http/Controllers/HelloController.phpで渡しています

use Illuminate\Support\Facades\DB; // 追記
public function index (Request $request) {
       $items = DB::select('select * from people');
       return view('hello.index', ['items' => $items]);
   }

さいごにルーティングをroutes/web.phpに設定!

Route::get('hello/', 'HelloController@index');

無事、登録したデータが画面に表示されました🎉

スクリーンショット 2020-01-02 12.25.51

ペジネーションの実装

ペジネーションが分かるように少しデータを増やしてみました。手順は先ほど作成したシーダーファイルにデータを追記し、php artisan db:seed を実行しただけです。

スクリーンショット 2020-01-02 12.45.31

ペジネーションはsimplePaginateを使うと簡単に実装ができました。

Controllers/HelloController.php

    public function index (Request $request) {
       // 5項目ずつレコードを取り出す
       $items = DB::table('people')->simplePaginate(5);
       return view('hello.index', ['items' => $items]);
   }

index.blade.phpにlinkを追記

{{ $items->links() }}

linksで値を出力することで、HTMLタグが生成され、ペジネーションのPreviousとNextのリンクが完成します

画像4

並び替えできるようにする

Nameをクリックしたら名前順、というように各項目で並び替えができるようにしていきます🙌

HelloController.php に$sortを定義します。

    public function index (Request $request) {
       $sort = $request->sort;
       $items = DB::table('people')->orderBy($sort, 'asc')->simplePaginate(5);
       $param = ['items' => $items, 'sort' => $sort];
       return view('hello.index', $param);
   }

これが本に載っていたコードなのですが、これだと/helloにアクセスしたときに$sort変数がnullになってしまいエラーになります

スクリーンショット 2020-01-02 13.25.45

PHP初心者なので、どう書いたら正解かわかりませんがとりあえずif文を追加して凌ぎました😕

$sort = $request->sort;
if (is_null($sort)) {
 $sort = 'id';
}

これで?sort=がない時はデータの登録順(id順)で表示されます

views/hello/index.blade.php も修正していきます。項目をクリックしたときにパラメータを付与したいのでリンクをつけます。

        <tr>
           <th><a href="/hello?sort=name">Name</a></th>
           <th><a href="/hello?sort=mail">Mail</a></th>
           <th><a href="/hello?sort=age">Age</a></th>
       </tr>

また、ページネーション部分ではappendsメソッドによりリンクにsort=hogeパラメータを追加するようにしています。

{{ $items->appends(['sort' => $sort])->links() }}

これで出来上がり!やったね🎉

画像6

参考


スキ頂けると嬉しいです〜