Lanjutan Laravel AUTH, CRUD Multi Level User

Card image

Setelah mengikuti langkah langkah sebelumnya pada blog berikut:

Link https://hafiz.infokand23.my.id/index.php?page=blog3

Selanjutnya adalah:

1. Untuk membuat fitur manajemen users dengan fungsi CRUD (Create, Read, Update, Delete) secara lengkap, kita akan menggunakan Resource Controller di Laravel. Berikut adalah langkah-langkahnya:

Buka terminal atau Command Prompt (CMD) dan arahkan ke direktori project Laravel Anda. Kemudian, jalankan perintah berikut untuk membuat controller resource: 

php artisan make:controller UserController --resource

Perintah ini akan membuat file UserController.php di dalam folder app/Http/Controllers. Controller ini akan memiliki method-method standar untuk menangani operasi CRUD.

Card image

selanjutkan tambahkan kode program berikut pada route web.

Card image

Sehingga jika dilihat pemetaan route 

php artisan route:list
menjadi seperti gambar di bawah ini.

Card image

2. Selanjutnya pada file UserController.php berikut

Card image

Buatkan kode berikut pada file tersebut

Card image

3. Untuk membuat fitur "Create Users", kita akan menampilkan form tambah data users. Berikut adalah langkah-langkahnya

Buka file UserController.php yang berada di dalam folder app/Http/Controllers. Kemudian, cari method create() dan edit kode programnya menjadi seperti berikut:

Card image

Perintah return view('user.create') artinya kita akan menampilkan view dengan nama create yang berada di dalam folder user.

4. Selanjutnya, kita perlu membuat folder user di dalam folder resources/views. Folder ini akan digunakan untuk menyimpan view-view yang berkaitan dengan manajemen users.

Setelah membuat folder user, tambahkan file create.blade.php di dalamnya. File ini akan berisi kode HTML untuk menampilkan form tambah data users.

Card image

Isikan file create.blade.php dengan kode program berikut:

Card image

5. Untuk meningkatkan tampilan dan fungsionalitas form dalam aplikasi Laravel, kita akan menambahkan Select2, sebuah plugin jQuery yang memungkinkan kita untuk membuat dropdown yang lebih interaktif. Berikut adalah langkah untuk menambahkan file CSS dan JavaScript Select2 ke dalam layout main.blade.php.

Buka file main.blade.php yang terletak di dalam folder resources/views/layouts. Tambahkan link CSS Select2 di dalam tag <head> seperti berikut: 

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

Setelah menambahkan link CSS, tambahkan script JavaScript Select2 sebelum penutup tag </body> di file yang sama. Tambahkan kode berikut: 


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

6. Selanjutnya, kita akan membuat form inputan untuk menambah data user. Silakan edit file create.blade.php yang terletak di dalam folder resources/views/user menjadi seperti kode program berikut:

Card image

Setelah Anda mengikuti langkah-langkah sebelumnya dan mengimplementasikan kode program pada file create.blade.php, tampilan form inputan user akan terlihat seperti gambar di bawah ini:

Card image

7. Selanjutnya, kita akan mengimplementasikan action store pada UserController untuk menyimpan data user yang diinputkan melalui form. Buka file UserController.php dan tambahkan kode program berikut pada method store:

Card image
Penjelasan Kode

Berikut adalah penjelasan dari setiap bagian kode di atas:

  • Method POST: Form create user menggunakan method POST yang akan mengirimkan data ke action store dengan route users.store.
  • Mengambil Data Input: Pada action store, kita menangkap isi form create user dengan menggunakan $request->get('nama') untuk setiap field input.
  • Instance Model User: Kita membuat instance model User dengan perintah $user = new \App\Models\User;.
  • Assign Data: Setelah itu, kita assign data yang diambil dari form ke dalam field yang sesuai pada model User, seperti $user->name, $user->username, $user->email, dan $user->password.
  • Hash Password: Password yang diinputkan akan di-hash menggunakan \Hash::make($request->get('password')) untuk keamanan.
  • Menyimpan Data: Untuk menyimpan data ke dalam database, kita menggunakan perintah $user->save();.
  • Redirect: Jika data berhasil disimpan, kita akan redirect ke route users.index dengan membawa session status menggunakan with('status', 'User baru berhasil ditambahkan').

Dengan langkah-langkah ini, Anda telah berhasil mengimplementasikan action store untuk menyimpan data user baru ke dalam database. Pastikan untuk menguji fungsionalitas ini dengan mengisi form dan menekan tombol Simpan.

8. Setelah fungsi create selesai, kita akan menampilkan data user yang telah ditambahkan. Untuk menampilkan data user, kita akan menggunakan method GET dengan URL http://localhost/users, yang merupakan route untuk action index pada UserController.

Buka file UserController.php dan edit action index() menjadi seperti kode program berikut:

Card image
Penjelasan Kode
  • Mengambil Data User: Kode $users = \App\Models\User::all(); digunakan untuk mengambil semua data user dari tabel users di database.
  • Menampilkan View: Kode return view('users.index', ['users' => $users]); akan menampilkan view users.index dan mengirimkan data user yang telah diambil ke view tersebut.

9. Selanjutnya, kita perlu membuat file view index.blade.php di dalam folder resources/views/users. File ini akan digunakan untuk menampilkan daftar user.

Card image

Buatkan kode berikut pada file tersebut

Card image

10. Untuk meningkatkan tampilan dan fungsionalitas tabel daftar user, kita akan menggunakan DataTables. Berikut adalah langkah-langkah untuk menambahkan file CSS dan JavaScript DataTables ke dalam layout main.blade.php.

Buka file main.blade.php yang terletak di dalam folder resources/views/layouts. Tambahkan link CSS DataTables di dalam tag <head> seperti berikut: 

<link href="{{ asset('sbadmin/vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">

Setelah menambahkan link CSS, tambahkan script JavaScript DataTables sebelum penutup tag </body> di file yang sama. Tambahkan kode berikut: 


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

11. Untuk memudahkan pengguna dalam menambah data user, kita akan menambahkan tombol yang mengarahkan ke form tambah user. Anda dapat menambahkan kode berikut di dalam file index.blade.php sebelum tabel daftar user:


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

Sehingga tampilan list user menjadi seperti gambar dibawah ini.

Card image

12. Untuk melakukan proses update data user, kita perlu membuat tombol action yang mengarahkan pada route users/edit/{user}/edit atau action edit pada UserController untuk menampilkan form edit. Kita juga akan menggunakan route users/edit/{user} untuk method PUT.

Silakan buka file user/index.blade.php dan 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 di atas diklik, maka akan menghasilkan string URL http://localhost/users/{user}/edit di mana {user} merupakan ID dari user yang diklik.

Selanjutnya, buka action edit pada UserController dan isikan dengan kode program berikut:

Card image
Penjelasan Kode
  • Mencari User: Kode $user = \App\Models\User::findOrFail($id); digunakan untuk mencari user berdasarkan ID yang diberikan. Jika user tidak ditemukan, akan mengembalikan error 404.
  • Menampilkan View Edit: Kode return view('user.edit', ['user' => $user]); akan menampilkan view edit pada folder user dan mengirimkan data user yang ditemukan ke view tersebut.

13. Selanjutnya, kita akan membuat view untuk mengedit data user. Silakan buat file edit.blade.php di dalam folder user yang terletak di resources/views

Card image

dan isikan dengan kode program berikut:

Card image
Penjelasan Kode
  • Form Method: Form menggunakan method POST dan mengarah ke route users.update dengan ID user yang akan diupdate.
  • Input Data: Setiap field input diisi dengan data user yang ada, seperti value="{{ $user->name }}" untuk nama, email, dan username.
  • Level: Dropdown untuk memilih level user, dengan opsi yang sudah dipilih berdasarkan data user yang ada.
  • Tombol Aksi: Terdapat tombol Batal untuk kembali ke daftar user dan tombol Simpan untuk menyimpan perubahan.

Sehingga tampilan form edit user akan terlihat seperti gambar di bawah ini:

Card image

13. Kemudian, kita akan mengimplementasikan action update pada UserController untuk memproses perubahan data user. Buka file UserController.php dan isikan action update dengan kode program berikut:

Card image
Penjelasan Kode
  • Mencari User: Kode $user = \App\Models\User::findOrFail($id); digunakan untuk mencari user berdasarkan ID yang diberikan. Jika user tidak ditemukan, akan mengembalikan error 404.
  • Memperbarui Data: Data user diperbarui dengan mengambil nilai dari form menggunakan $request->get('nama') untuk nama dan $request->get('level') untuk level, yang kemudian di-encode menjadi JSON.
  • Menyimpan Perubahan: Perubahan disimpan ke dalam database dengan menggunakan $user->save();.
  • Redirect: Setelah berhasil mengubah data, pengguna akan diarahkan kembali ke route users.index dengan membawa session status menggunakan with('status', 'User berhasil diubah').

Seperti yang ditunjukkan pada gambar di bawah ini, Anda dapat mencoba melakukan perubahan data user:

Card image

ubah menjadi seperti ini lalu tekan simpan

Card image

setelah menekan tombol simpan akan langsung dialihkan ke page berikut dan diberikan alert seperti gambar dibawah ini

Card image

15. Untuk memungkinkan pengguna menghapus data user, kita perlu menambahkan tombol atau link pada daftar user. Silakan buka file user/index.blade.php dan tambahkan kode program berikut di bawah link edit:

Card image

16. Selanjutnya, kita perlu mengimplementasikan action destroy pada UserController untuk memproses penghapusan data user. Buka file UserController.php dan isikan action destroy dengan kode program berikut:

Card image
Penjelasan Kode
  • Mencari User: Kode $user = \App\Models\User::findOrFail($id); digunakan untuk mencari user berdasarkan ID yang diberikan. Jika user tidak ditemukan, akan mengembalikan error 404.
  • Menghapus User: Kode $user->delete(); digunakan untuk menghapus user dari database.
  • Redirect: Setelah berhasil menghapus data, pengguna akan diarahkan kembali ke route users.index dengan membawa session status menggunakan with('status', 'User berhasil dihapus').

Berikut adalah tampilannya

Card image

Ketika tombol hapus diklik, akan muncul pop-up dialog peringatan yang menanyakan apakah data akan dihapus, seperti yang ditunjukkan pada gambar di bawah ini:

Card image

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

Card image

17. Untuk menambahkan menu Users ke dalam sidebar aplikasi, silakan buka file layouts/sidebar.blade.php dan tambahkan kode program berikut di dalam daftar menu:

Card image

Setelah menambahkan kode di atas, aplikasi Anda akan menampilkan menu Users di sidebar, seperti yang ditunjukkan pada gambar di bawah ini:

Card image

Membuat CRUD (Create, Read, Update dan Delete) Sederhana OOP (Object Oriented Programming) Menggunakan PHP & MYSQL

Card image Read More

Konvigurasi Laravel

Card image Read More

Laravel AUTH, CRUD Multi Level User

Card image Read More