Laporan Praktikum 9

Framework Laravel Bagian 2 (CRUD Multi Users)

Untuk membuat fitur manajemen users, kita akan menggunakan fungsi keseluruhan CRUD, maka kita akan membuat Controller Resource. Jalankan perintah berikut di terminal:

php artisan make:controller UserController --resource

Selanjutnya tambahkan route berikut pada web.php

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

Sehingga jika dilihat pemetaan route php artisan route:list menjadi seperti gambar berikut.

Buka file app/Http/Controllers/UserController dan isi dengan fungsi-fungsi CRUD 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()
    {
        $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('name');
        $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('name');
        $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');
    }
}

CREATE USERS

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')
<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="name" name="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">
                        </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

Selanjutnya tambahkan file css dan javascript select2 ke dalam layouts main.blade.php. Tambahkan program berikut di bagian tag head:

<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>

Berikut adalah tampilan form input user

STORE USERS

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 $user = new \App\Models\User. Setelah itu assign sesuai dengan nama field. Untuk menyimpan kedalam database User, gunakan perintah $user->save. Jika data berhasil disimpan, maka akan di redirect ke route users.index dengan membawa session status.

READ/LIST USERS

Selanjutnya setelah fungsi create selesai kita akan menampilkan data user. Untuk menampilkan data user kita akan menggunakan method GET yaitu http://localhost/users, yang mana route ini merupakan action index pada UserController.

Buat file index.blade.php pada folder view/user dan 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>
        <p> 
            <a href="{{ route('users.create') }}" class="btn btn-primary btn-sm">Tambah User</a>
        </p>
    </div>
</div> 
@endsection

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

Sehingga tampilan list user menjadi seperti gambar dibawah ini

UPDATE USERS

Untuk melakukan proses update data user, terlebih dahulu buat tombol action yang mengarahkan pada route users/edit/{user}/edit atau action edit pada UserController untuk menampilkan 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', $user->id) }}" class="btn btn-sm btn-success">Edit</a>

Jika salah satu tombol diatas diklik maka akan menghasilkan string url http://localhost/users/{user}/edit yang mana {user} merupakan id dari user yang di klik. Update users menggunakan fungsi edit dan update dari UserController. Fungsi edit akan mengambil data user berdasarkan id user yang diidapatkan dan ditampung pada variable $user dan dikrimkan ke view user.edit. Selanjutnya data yang telah diedit akan disimpan menggunakan fungsi Update. Buat view edit.blade.php didalam folder user 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="name" name="name" 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 dibawah ini

DELETE USERS

Tambahkan tombol untuk menghapus user pada list user. Buka view/user/index.blade.php dan tambahkan kode berikut dibawah kode tombol edit.

<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">
    <input type="submit" value="Hapus" class="btn btn-danger btn-sm">
</form>

Penghapusan data user diatur oleh fungsi destroy pada UserController. Ketika di klik tombol hapus, maka akan muncul pop up dialog peringatan apakah data akan dihapus. Jika di klik OK, maka data akan dihapus.

Menambahkan Menu User di Sidebar

Buka view/layouts/sidebar.blade.php kemudian tambahkan kode program berikut dibawah item dashboard.

<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>

Laporan Praktikum Pemrograman Web

Laporan Praktikum 9

Buka file app/Http/Controllers/UserController dan isi dengan fungsi-fungsi CRUD berikut:

CREATE USERS

STORE USERS

READ/LIST USERS

UPDATE USERS

DELETE USERS

Menambahkan Menu User di Sidebar

Tinggalkan Komentar

Komentar

Contact

Contact Me

Send Me A Message