Laporan Praktikum Pekan 9 Pemrograman Web – 2311532008

Muhammad Galid Avero – 2311532008

Laravel AUTH Lanjutan

Selanjutnya, kita akan membuat fitur manajemen user dengan menggunakan fungsi CRUD secara keseluruhan. Untuk melakukan ini, buka terminal di code editor dan ketikkan perintah berikut:

php artisan make:controller UserController –resource

Lalu tambahkan kode ini di route web

use App\Http\Controllers\UserController; 
Route::resource('users', UserController::class); 

lalu kita akan melihat isi dari route kita dengan menggunakan perintah:

php artisan route:list

akan terlihat seperti ini apabila sudah dijalankan

Selanjutnya adalah membuat file UserController dengan kode 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()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     * 
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        
    }

    /**
     * Store a newly created resource in storage.
     * 
     * @param \Illuminate\Http\Request $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     */
    public function destroy($id)
    {
        //
    }
}

Selanjutnya pada bagian kode ini, cari fungsi create dan buat menjadi kodenya seperti ini

kode di atar artinya perintah untuk menampilkan view create pada folder user

selanjutnya buat folder user dalam folder view, tambahkan file create.blade.php dan isikan dengan kode program berikut ini.

Selanjutnya tambahkan file css dan javascript select2 ini 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>   

next adalah membuat tampilan view create sederhana untuk menampilkan tambah user . Masukkan pada file user/create.blade.php dengan kode seperti berikut:

@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 action="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-9">
                            <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">
                        <label class="col-sm-10 text-center"></label>
                        <div class="col-sm-9">
                            <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

Jika berhasil maka akan menampilkan laman seperti ini

Selanjutnya, tambahkan kode berikut di UserController pada function store:

Form create user menggunakan method POST yang akan dikirimkan ke action store dengan route users.store, selanjutnya pada action store akan ditangkap isi form create user dengan cara $request->get(‘nama input’) kemudian disimpan pada table user dengan cara instance model User dengan cara $user = new \App\Models\User setelah itu assign sesuai dengan nama field. Untuk menyimpan kedalam database User menggunakan perintah $user->save, jika data berhasil disimpan akan di redirect ke route users.index dengan mebawa session status.

Selanjutnya, kita akan membuat menampilkan data user. Untuk menampilkan data user kita akan menggunakan method GET yaiitu http://localhost/users yang mana route ini merupakan action index pada UserController, buka action index kemudian edit menjadi seperti kode program berikut.

Kemudian kita membuat file view bernama index.blade.php pada folder views/user dengan kode 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">
        <p> 
          <a href="{{ route('users.create') }}" class="btn btn-primary btn-sm">Tambah User</a> 
        </p>     
      </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>
                                <a href="{{ route('users.edit', $user->id) }}" class="btn btn-sm btn-success">Edit</a>
                                <form
                                    onsubmit="return confirm('Hapus data user ?')"
                                    class="d-inline"
                                    action="{{ route('users.destroy', [$user->id]) }}"
                                    method="POST">
                                    @csrf
                                    <input type="hidden" name="_method" value="DELETE">
                                    <button type="submit" class="btn btn-danger btn-sm">Hapus</button>
                                </form>
                            </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 datatables 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 kode program berikut pada file index.blade.php

jika berhasil maka laman akan terlihat seperti ini

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

Kode diatas akan mengambil data user berdasarkan id user yang diidapatkan dan ditampung pada variable $user dan dikrimkan ke view user.edit, silahkan 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"> 
    </div> 
    <div class="card-body">    
        <div class="row"> 
            <div class="col-lg-9"> 
                <form method="POST" action="{{ route('users.update', [$user->id]) }}"> 
                    <input type="hidden" name="_method" value="PUT"> 
                  @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" 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-4 mr-2"> 
                          <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-10 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 gambar berikut ini.

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

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');
    }

Kemudian kita akan mencoba untuk mengubah nama dari salah satu user yang terdaftar di sistem. Kita akan mencoba nama Vero menjadi Galid. Hasilnya adalah seperti berikut:

Selanjutnya. kita akan membuat tombol delete pada kolom action. Tambahkan tombol atau link pada list user, silahkan buka view user/index.blade.php dan tambahkan kode program berikut dibawah link edit.

<form 
    onsubmit="return confirm('Hapus Data User?')" 
    class="d-inline" 
    action="{{ route('users.destroy', [$users->id]) }}" 
    method="POST"
>
    @csrf
    @method('DELETE')
    
    <input 
        type="submit" 
        value="Hapus" 
        class="btn btn-danger btn-sm"
    >
</form>

Kemudian buka action destroy pada UserController dan isikan dengan kode program berikut ini.

Tampilan delete akan seperti berikut:

Jika kita klik tombol hapus, akan muncul pop up seperti berikut:

apabila di OK kan maka akan menampilkan hasil ini

Terakhir, kita akan menambahkan menu users di sidebar. buka view Layouts/sidebar.blade.php kemudian tambahkan kode program berikut.

jika telah selesai semua, maka apabila di run akan menghasilkan tampilan seperti ini