BLANTERORIONv101
Home Laravel tutorial

Cara Membuat Edit InLine Table Laravel

26 April 2022
Cara Membuat Edit InLine Table Laravel

Postingan ini akan memberikan Anda contoh Cara Membuat Edit InLine Table Laravel. Anda akan belajar cara edit inline table sederhana dari laravel ajax.

Untuk contoh studi kasusnya, saya akan menampilkan daftar pengguna/user dan anda mengedit nama dan emailnya menggunakan x-editable js.

Peninjau :

Langkah 1 : Install Laravel

Pertama-tama kita perlu untuk menginstall Laravel terlebih dadulu, menggunakan perintah dibawah ini :

composer create-project --prefer-dist laravel/laravel blog

Langkah 2 : Tambahkan Pengguna Dummy


Pada langkah ini, kita akan menambahkan beberapa pengguna dummy menggunakan factory.

php artisan tinker 
User::factory()->count(10)->create()

Langkah 3 : Buat Route

Kita perlu membuat beberapa rute untuk fungsi.

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\UserController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
  
Route::get('users', [UserController::class, 'index'])->name('users.index');
Route::post('users', [UserController::class, 'update'])->name('users.update');


Langkah 4 : Buat Controller


Pada langkah ini, kita perlu untuk membuat UserController dan menambahkan kode seperti dibawah ini :
<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\User;
  
class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        $users = User::paginate(10);
          
        return view('users', compact('users'));
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function update(Request $request)
    {
        if ($request->ajax()) {
            User::find($request->pk)
                ->update([
                    $request->name => $request->value
                ]);
  
            return response()->json(['success' => true]);
        }
    }
}


Langkah 5 : Buat File Blade


Pada langkah ini kita akan membuat tampilan untuk menampilkan data users.
resource/views/users.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>Cara Membuat Edit InLine Table Laravel - SarjanaIT.com</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/css/jquery-editable.css" rel="stylesheet"/>
    <script>$.fn.poshytip={defaults:null}</script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/js/jquery-editable-poshytip.min.js"></script>
</head>
<body>
      
<div class="container">
    <h1>Laravel Table Inline Editing Example - ItSolutionStuff.com</h1>
    <table class="table table-bordered data-table">
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            @foreach($users as $user)
                <tr>
                    <td>{{ $user->id }}</td>
                    <td>
                        <a href="" class="update" data-name="name" data-type="text" data-pk="{{ $user->id }}" data-title="Enter name">{{ $user->name }}</a>
                    </td>
                    <td>
                        <a href="" class="update" data-name="email" data-type="text" data-pk="{{ $user->id }}" data-title="Enter email">{{ $user->email }}</a>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
     
</body>
     
<script type="text/javascript">
    $.fn.editable.defaults.mode = 'inline';
  
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': '{{csrf_token()}}'
        }
    }); 
  
    $('.update').editable({
           url: "{{ route('users.update') }}",
           type: 'text',
           pk: 1,
           name: 'name',
           title: 'Enter name'
    });
</script>
</html>

Selesai, sekarang anda bisa menjalankan perintah dibawah ini untuk menjalankan contoh yang sudah kita buat :

php artisan serve

Jika sudah jalankan, anda dapat membuka URL dibawah ini pada browser Anda :

localhost:8000/user

Sekian untuk tutorial kali ini, jika anda masih bingung atau mengalami error silahkan bertanya pada kolom komentar dibawah ini.

Komentar