menu

Laravel - Pagination


Kembali lagi ke Tutorial Laravel, pada tutorial sebelumnya kita sudah sedikit belajar tentang bootstrap, kali ini kita akan belajar membuat sebuah pagination atau halaman pada tampilan atau UI website kita agar terlihat lebih rapi dan tidak memberatkan server karena terlalu banyak load database server.

Pagination pada Laravel sendiri sudah ada librarynya jadi kita hanya perlu memanggilnya saja pada controller kemudian menampilkan UI nya pada blade.

Oke langsung saja kita praktekkan cara membuat pagination pada Laravel,

Pertama, edit file controller Js2Controller.php pada path protected/app/controllers/belajar_js/ menjadi seperti ini,
<?php namespace Controller\belajar_js;

use \View;
use Model\User;

Class Js2Controller Extends \BaseController
{
 public function Index()
 {
  $users = User::paginate(2);

  $content['users'] = $users;

  return View::make('web/java-script2')
     ->with('content', $content);
 }
}
Terlihat pada controller codedoct menggunakan paginate(2) yang berarti data users yang ditampilkan hanya 2 perhalaman.

Selanjutnya edit file blade java-script2.blade.php pada path protected/app/views/web/ menjadi seperti ini,
@extends('layouts/web/master')

<?php $title = 'Java Script 2' ?>

@section('style')
 {{ HTML::style('public/css/content/belajar_js/js2.css') }}
@stop

@section('script')
 {{ HTML::script('public/js/js2.js') }}
@stop

@section('content')
<div class="isi">
 <h4>Belajar java script 2</h4>
 <br>
 <label>Hide and Show Class</label>
 <br><br>
 <div class="user-list">
  @if($content['users'])
   @foreach($content['users'] as $user)
    {{ Form::open(array('url' => 'crud/update/'.$user['id'])) }}
    <div class="box-user">
     <table>
      <tbody class="showing">
       <tr>
        <td>Name</td><td>:</td><td>{{ $user['name'] }}</td>
       </tr>
       <tr>
        <td>Username</td><td>:</td><td>{{ $user['username'] }}</td>
       </tr>
       <tr>
        <td>Email</td><td>:</td><td>{{ $user['email'] }}</td>
       </tr>
      </tbody>
      <tbody class="editing hidden">
       <tr>
        <td>Name</td><td>:</td><td><input type="text" name="name" value="{{ $user['name'] }}"></td>
       </tr>
       <tr>
        <td>Username</td><td>:</td><td><input type="text" name="username" value="{{ $user['username'] }}"></td>
       </tr>
       <tr>
        <td>Email</td><td>:</td><td><input type="text" name="email" value="{{ $user['email'] }}"></td>
       </tr>
      </tbody>
     </table>
     <div class="tombol">
      <div class="edit">
       <button type="button" class="btn btn-default" onclick="edit(this, event)">Edit</button>
      </div>
      <div class="save hidden">
       <button type="button" class="btn btn-default" onclick="back(this, event)">Return</button>
       <input type="submit" class="btn btn-success" value="Save">
      </div>
     </div>
    </div>
    {{ Form::close() }}
   @endforeach
  @else
   <label>Data user empty ...</label>
  @endif
 </div>
//disini pagination nya
 <div class="text-center"> 
  {{ $content['users']->appends(Input::except(array('page')))->links() }}
 </div>
</div>
@stop

Pastikan data users anda lebih dari 2 karena nilai pagination yang ditetapkan adalah 2, jika belum silahkan tambah user lagi dengan klik submenu user pada menu menu(css) seperti ini,


dan kemudian klik create,


Jika sudah selesai selanjutnya buka submenu Belajar script2  pada menu menu(css).


sehingga tampilan paginationnya akan tampak seperti ini



===DONE!===