내용

다음 순서로 정리합니다.
1. Mac에 XAMPP+Laravel 설치
2. 사용자 로그인 기능 추가
3. MVC 및 라우팅 설명
4. 사용자 목록 표시
5. 사용자 목록의 페이지 네이션보기 ←지금 여기
6. 사용자 관리 API 추가
7. Vue.js 및 API 기반 사용자 관리 앱 추가 준비
8. Vue.js 및 API 기반 사용자 관리 앱 추가
9. Vue.js 및 API 기반 사용자 관리 앱에 대한 Pagination 추가
10. API에 JWTAuth 인증 추가
11. Vue.js 및 API 기반 사용자 관리 앱에 인증 추가

5. 사용자 목록의 페이지 네이션보기

많은 유저가 등록되면 리스트 표시하는 경우에 표가 페이지로부터 돌출해 버립니다. 그러한 경우, 1 페이지에 표시하는 유저수에 상한을 마련해, 다음으로 이전로 하는 버튼과 함께 페이지 보내기의 기능이 있으면 편리합니다. 이 기능을 결제라고 합니다.

Pagination의 구현은 복잡하고 개발자 울음이지만 Laravel은 Pagination을 쉽게 구현할 수있는 기능을 미리 갖추고 있습니다.

우선, 「app/Http/Controllers/HomeController.php」의 index 함수를 편집합니다.

app/Http/Controllers/HomeController.php

...
class HomeController extends Controller
{
...
    public function index()
    {
        $users = User::paginate(1); // ←修正
        return view('home', ['users' => $users]);
    }

paginate 함수의 인수의 숫자(여기서는 1)는, 1 페이지에 표시하는 유저수에 상한을 나타냅니다. 보통 브라우저의 하한에 도달하는 정도의 좀 더 큰 숫자가 될 것이라고 생각합니다만, 여기에서는 페지네이션의 테스트를 용이하게 하기 위해서, 1행 표시하면 다음 버튼이 표시되도록 설정하고 있습니다.

그런 다음 resources/views/home.blade.php를 편집하고 테이블 뒤에 {{$users->links()}}를 추가합니다.

resources/views/home.blade.php

...
<table class="table table-striped table-bordered">
  <tr>
    <th>ID</th>
    <th>NAME</th>
  </tr>
  <tr>
  @foreach($users as $user)
    <td>{{ $user->id }}</td>
    <td>{{ $user->name }}</td>
  @endforeach
  </tr>
</table>
{{ $users->links() }} <!--追加-->
...

이제 "php artisan serve"를 실행하여 http://localhost:8000에 액세스해 보겠습니다. 로그인 페이지에서 로그인하면 아래 그림과 같이 결제가 표시됩니다.



표에는 「paginate(1)」라고 설정한 대로 1페이지에 1행만 표시됩니다. 또한 아래의 페지네이션에서 2페이지를 선택하면 아래 그림과 같이 페이지가 천이합니다.



페이지네이션의 디자인은 bootstrap을 이용하고 있습니다만 CSS로 커스터마이즈가 가능합니다.

이상, 「5. 유저 리스트의 페지네이션 표시」가 완료되었습니다. 구형 HTML/CSS 기반 웹 애플리케이션을 쉽게 만들 수 있다는 것을 알았다고 생각합니다.

다음부터는 Vue.js라는 JavaScript 기반 단일 페이지 애플리케이션 빌드 라이브러리와 REST API 조합의 웹 애플리케이션을 개발합니다. 우선은 「 6. 사용자 관리 API 추가 」를 실시합니다.