Laporan Praktikum Pemrograman Web Pertemuan 9

Pada pertemuan kali ini, kita akan melanjutkan pekerjaan kita pada pertemuan 8 kemarin. Laporan praktikum pertemuan 8 dapat diakses disini

Selanjutnya, kita akan membuat fitur manajemen users, kita kaan menggunakan fungsi keseluruhan CRUD maka kita akan membuat Controller Resource. Pertema, buka terminal yang ada di code editor kemudian ketikkan command berikut:

php artisan make:controller UserController –resource

Kemudian, tambahkan kode ini pada route web:

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

Coba untuk melihat isi dari route kita dengan menggunakan perintah:

php artisan route:list

Kemudian akan seperti berikut:

Kemudian kita akan mengedit file UserController Resource. Gunakan Kode Berikut:

<?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)
    {
        //
    }
}

Kemudian kita akan menambahkan kode pada function create seperti kode berikut. Fungsinya adalah untuk Route menampilkan view form tambah data users adalah users/create :

return view('user.create');

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:

extends('layouts.main') 
@section("judul") Create User @endsection 
@section('konten') 
<P>Konten</P> 
@endsection 

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>

Kemudian, kita akan membuat view sederhana untuk create user. Buat 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 hasilnya adalah sebagai berikut:

Selanjutnya, tambahkan kode berikut di UserController pada function store:

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('user.index')->with('status','user baru berhasil ditambahkan');
    }

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.

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

Kemudian kita membuat file view bernama index.blade.php pada folder views/user dengan kode berikut:

@extends ('layouts.main')
@section("judul")
Users
@endsection
@if (session('status'))
<div class="alert alert-success">
    {{session('status')}}
</div>
@endif
@section('konten')

<div class="card shadow mb-4">
<div class="card-header py-3">Create User</div>
    <div class="card-body">
        <div class="row">
            <div class="table-responsive">
                <p>
                    <a href="{{ route('users.create') }}" class="btn btn-primary btn-sm">Tambah User</a>
                </p>
                <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 ($user as $users)
                        <tr>
                            <td>{{ $users->name }}</td>
                            <td>{{ $users->username }}</td>
                            <td>{{ $users->email }}</td>
                            <td>
                                [action]
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
</div>
@endsection

Karena menggunakan datatables tambahkan file css datatable pada bahian 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>

Jika berhasil, maka tampilannya akan seperti berikut

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.

<a href="{{ route('users.edit', $users->id) }}" class="btn btn-sm btn-success">Edit</a> 

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 Admin menjadi Farhan. 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
                                <input type="hidden" name="_method" value="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.

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

Tampilan delete akan seperti berikut:

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

Jika kita klik OK, user akan terhapus

Terakhir, kita akan menambahkan menu users di sidebar. buka view Layouts/sidebar.blade.php kemudian tambahkan kode program 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>

Jika berhasil, maka tampilan sidebar akan menjadi seperti berikut: