Manajemen User Menggunakan Framework Laravel - Part 2

Dalam membuat fitur manajemen users, menggunakan fungsi keseluruhan CRUD maka akan membuat controller resource, buka terminal/CMD lalu masukkan perintah

                    php artisan make:controller UserController --resource
                  

selanjutnya tambahkan kode program berikut pada route web

Sehingga jika dilihat pemetaan php artisan route:list menjadi seperti gambar dibawah ini

<?php 
namespace App\Http\Controllers; 
 
use Illuminate\Http\Request; 
 
class UserController extends Controller 
{ 
    /** 
     * Display a listing of the resource. 
     * 
     * @return \Illuminate\Http\Response 
     */ 
    public function index() 
    { 
        $users = \App\Models\User::all();
        return view('user.index', ['users' => $users]);   
    } 
 
    /** 
     * Show the form for creating a new resource. 
     * 
     * @return \Illuminate\Http\Response 
     */ 
    public function create() 
    { 
        return view('user.create');
    } 
 
    /** 
     * Store a newly created resource in storage. 
     * 
     * @param  \Illuminate\Http\Request  $request 
     * @return \Illuminate\Http\Response 
     */ 
    public function store(Request $request) 
    { 
        $user = new \App\Models\User;
        $user->name = $request->get('nama');
        $user->username = $request->get('username'); 
        $user->email = $request->get('email'); 
        $user->password = \Hash::make($request->get('password')); 
        $user->level = json_encode($request->get('level')); 
         
        $user->save(); 
 
        return redirect()->route('users.index')->with('status','user baru berhasil ditambahkan');
    } 
 
    /** 
     * Display the specified resource. 
     * 
     * @param  int  $id 
     * @return \Illuminate\Http\Response 
     */ 
    public function show($id) 
    { 
        // 
    } 
 
    /** 
     * Show the form for editing the specified resource. 
     * 
     * @param  int  $id 
     * @return \Illuminate\Http\Response 
     */ 
    public function edit($id) 
    { 
        $user = \App\Models\User::findOrFail($id); 
        return view('user.edit', ['user' => $user]); 
    } 
 
    /** 
     * Update the specified resource in storage. 
     * 
     * @param  \Illuminate\Http\Request  $request 
     * @param  int  $id 
     * @return \Illuminate\Http\Response 
     */ 
    public function update(Request $request, $id) 
    { 
        $user = \App\Models\User::findOrFail($id); 
        $user->name = $request->get('nama'); 
        $user->level = json_encode($request->get('level')); 
        $user->save(); 
        return redirect()->route('users.index', [$id])->with('status', 'User berhasil diubah');
    } 
 
    /** 
     * Remove the specified resource from storage. 
     * 
     * @param  int  $id 
     * @return \Illuminate\Http\Response 
     */ 
    public function destroy($id) 
    { 
        $user = \App\Models\User::findOrFail($id); 
        $user->delete(); 
        return redirect()->route('users.index')->with('status', 'User berhasil dihapus');
    } 
}
                  

Route untuk menampilkan view form tambah data users adalah users/create. Silahkan buka file UserController kemudian pada action create edit kode program menjadi seperti berikut.

Perintah return view(‘user.create’) artinya menampilkan view create pada folder user, selanjutnya buat folder user didalam folder view, kemudian tambahkan file create.blade.php dan isikan dengan kode program berikut ini.

Selanjutnya tambahkan file css dan javascript select2 kedalam layout main.blade.php

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
        $('.select2-multiple').select2({
            placeholder: "Pilih",
            allowClear: true
        });
    });
</script>
                  

Selanjutnya membuat form inputan create user, pada file user/create.blade.php menjadi seperti kode program berikut ini:

@extends('layouts.main') 
@section("judul") Create User @endsection 
@section('konten') 
<div class="card shadow mb-4"> 
    <div class="card-header py-3"> 
    </div> 
    <div class="card-body"> 
        <div class="row"> 
            <div class="col-lg-9"> 
                <form method="POST" action="{{ route('users.store') }}"> 
                  @csrf 
                    <div class="form-group row"> 
                        <label class="col-sm-3 col-form-label text-center">Nama</label> 
                        <div class="col-sm-9"> 
                          <input type="text" class="form-control" id="nama" name="nama"> 
                        </div> 
                    </div> 
                    <div class="form-group row"> 
                      <label class="col-sm-3 col-form-label text-center">Email</label> 
                      <div class="col-sm-9"> 
                        <input type="email" class="form-control" id="email" name="email"> 
                      </div> 
                    </div> 
                    <div class="form-group row"> 
                        <label class="col-sm-3 col-form-label text-center">Username</label> 
                        <div class="col-sm-9"> 
                          <input type="text" class="form-control" id="username" name="username"> 
                        </div> 
                    </div> 
                    <div class="form-group row"> 
                        <label class="col-sm-3 col-form-label text-center">Password</label> 
                        <div class="col-sm-2"> 
                          <input type="password" class="form-control" id="password" name="password"> 
                        </div> 
                    </div> 
                    <div class="form-group row"> 
                        <label class="col-sm-3 col-form-label text-center">Level</label> 
                        <div class="col-sm-4 mr-2"> 
                          <select class="form-control select2-multiple" name="level[]" multiple="multiple"> 
                            <option value="ADMIN">ADMIN</option> 
                            <option value="GURU">GURU</option> 
                            <option value="STAFF">STAFF</option> 
                          </select> 
                        </div> 
                    </div> 
                    <div class="form-group row"> 
                      <div class="col-sm-10 text-center"> 
                        <button type="reset" class="btn btn-warning btn-sm">Batal</button> 
                        <button type="submit" class="btn btn-primary btn-sm">Simpan</button> 
                      </div> 
                    </div> 
                </form> 
            </div> 
        </div> 
    </div> 
</div> 
@endsection 
                  

Sehingga tampilan form inputan user menjadi seperti pada gambar

public function store(Request $request) 
{ 
    $user = new \App\Models\User; 
    $user->name = $request->get('nama'); 
    $user->username = $request->get('username'); 
    $user->email = $request->get('email'); 
    $user->password = \Hash::make($request->get('password')); 
    $user->level = json_encode($request->get('level')); 

    $user->save(); 

    return redirect()->route('users.index')->with('status','user baru berhasil ditambahkan'); 
}
                

Selanjutnya setelah fungsi create selesai, maka akan ditampilkan data user. Untuk menampilkan data user menggunakan method GET yaitu http://localhost/users yang mana route ini merupakan action index pada UserController, buka action index kemudian edit menjadi seperti pada program berikut.

public function index() 
{ 
    $user = \App\Models\User::all(); 
    return view('users.index', ['user' => $user]); 
}
                  

Selanjutnya buat file dengan nama index.blade.php pada folder views/userdan isi dengan kode program berikut

@extends('layouts.main') 
@section("judul") Users @endsection 
@section('konten') 
@if(session('status')) 
    <div class="alert alert-success"> 
        {{ session('status') }} 
    </div> 
@endif  
<div class="card shadow mb-4"> 
    <div class="card-header py-3"> 
    </div> 
    <div class="card-body"> 
        <div class="table-responsive"> 
        <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"> 
            <thead> 
              <tr> 
                <th><b>Name</b></th> 
                <th><b>Username</b></th> 
                <th><b>Email</b></th> 
                <th><b>Action</b></th> 
              </tr> 
            </thead> 
            <tbody> 
              @foreach($users as $user) 
                <tr> 
                  <td>{{ $user->name }}</td> 
                  <td>{{ $user->username }}</td> 
                  <td>{{ $user->email }}</td> 
                  <td> 
                    [action] 
                  </td> 
                </tr> 
              @endforeach  
            </tbody> 
          </table> 
        </div> 
    </div> 
</div> 
@endsection
                  

Karena menggunakan datatables tambahkan file css datatable pada bagian head main.blade.php dan file js datatable pada bagian bawah main.blade.php

<link href="{{ asset('sbadmin/vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet"> 
<script src="{{ asset('sbadmin/vendor/datatables/jquery.dataTables.min.js') }}"></script> 
<script src="{{ asset('sbadmin/vendor/datatables/dataTables.bootstrap4.min.js') }}"></script> 
<script src="{{ asset('sbadmin/js/demo/datatables-demo.js') }}"></script>
                  

Selanjutnya menambahkan button untuk membuka form tambah user seperti pada kode program berikut ini:

<p> 
    <a href="{{ route('users.create') }}" class="btn btn-primary btn-sm">Tambah User</a> 
</p>
                  

Sehingga tampilan list user menjadi seperti pada gambar dibawah ini.

Selanjutnya untuk melakukan proses update data user terlebih dahulu buatkan tombol action yang mengarahkan pada route users/edit/{user}/edit atau action edit pada UserController untuk menampilkan form dan menggunakan form dan menggunakan route users/edit/{user} untuk method PUT. Pertama, ketika akan membuat tombol edit pada tampilan list user, buka file user/index.blade.php pada kolom [action] ganti dengan program berikut ini:

Jika salah satu tombol ini diklik maka akan menghasilkan string url http://localhost/users/%7buser%7d/edit yang mana {user} merupakan id dari user yang diklik. Selanjutnya buka action edit pada UserController dan isikan program berikut:

public function edit($id) 
{ 
    $user = \App\Models\User::findOrFail($id); 
    return view('user.edit', ['user' => $user]); 
}
                  

Dari kode tersebut akan mengambil data user berdasarkan id user yang didapatkan dan ditampung pada variabel $user dan dikirimkan ke view user.edit, selanjutnya buat view didalam folder user/edit.blade.php dan isikan dengan kode program berikut

<@extends('layouts.main')>

<@section("judul")>
    Edit User
<@endsection>

<@section('konten')>
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Form Edit User</h6>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-lg-9">
                <form method="POST" action="{{ route('users.update', $user->id) }}">
                    @csrf
                    @method('PUT')
                    
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label text-center">Nama</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="nama" name="nama" value="{{ $user->name }}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label text-center">Email</label>
                        <div class="col-sm-9">
                            <input type="email" class="form-control" id="email" name="email" value="{{ $user->email }}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label text-center">Username</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="username" name="username" value="{{ $user->username }}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label text-center">Level</label>
                        <div class="col-sm-9">
                            <select class="form-control select2-multiple" name="level[]" multiple="multiple">
                                <option value="ADMIN" {{ in_array("ADMIN", json_decode($user->level)) ? "selected" : "" }}>ADMIN</option>
                                <option value="GURU" {{ in_array("GURU", json_decode($user->level)) ? "selected" : "" }}>GURU</option>
                                <option value="STAFF" {{ in_array("STAFF", json_decode($user->level)) ? "selected" : "" }}>STAFF</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-sm-12 text-center">
                            <a href="{{ route('users.index') }}" class="btn btn-warning btn-sm">Batal</a>
                            <button type="submit" class="btn btn-primary btn-sm">Simpan</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<@endsection>
                  

Sehingga tampilan form edit user menjadi seperti pada gambar berikut:

Selanjutnya buka action update pada UserController kemudian isikan dengan kode program berikut

public function update(Request $request, $id) 
{ 
    $user = \App\Models\User::findOrFail($id); 
    $user->name = $request->get('nama'); 
    $user->level = json_encode($request->get('level')); 
    $user->save(); 
    return redirect()->route('users.index', [$id])->with('status', 
    'User berhasil diubah'); 
}
                  

Setelah dilakukan edit pada nama user, jika berhasil maka akan didirect ke halaman users dengan menampilkan alert success seperti pada gambar

Untuk membuat fitur hapus pada tabel user, tambahkan tombol atau link pada list user. Silahkan buka view user/index.blade.php dan tambahkan program berikut

Selanjutnya buka action destroy pada UserController dan isikan dengan kode program berikut

public function destroy($id) 
{ 
    $user = \App\Models\User::findOrFail($id); 
    $user->delete(); 
    return redirect()->route('users.index')->with('status', 'User berhasil dihapus');
} 
                  

Ketika diklik salah satu tombol hapus maka akan muncul poop up dialog peringatan apakah data akan dihapus seperti pada gambar berikut

Jika kita tekan oke maka data akan terhapus, jika data berhasil dihapus maka akan muncul pesan seperti pada gambar berikut

Buka view Layout/sidebar.blade.php kemudian tambahkan kode berikut

<li class="nav-item"> 
    <a class="nav-link" href="{{ route('users.index') }}"> 
        <i class="fas fa-fw fa-users"></i> 
        <span>Users</span>
    </a> 
</li>
                  

Sehingga pada aplikasi akan muncul menu users seperti pada gambar ini