Tutorial LARAVEL 9 | 3. CRUD (Create Read Update Delete)

Crud Laravel 9 - Selamat datang di website CopyPasteKode, pada tutorial kali ini kita akan belajar bagaimana cara membuat fitur CRUD dengan menggunakan Laravel versi 9, CRUD merupakan singkatan dari istilah berikut :

• C : Create
• R : Read
• U : Update
• D : Delete

Tutorial Laravel 9 ini merupakan lanjutan dari tutorial Laravel sebelumnya yaitu Tutorial cara Instalasi Laravel, tutorial cara Templating dengan Laravel, bagi teman-teman yang belum mengikuti tutorial sebelumnya saya sarankan untuk mengikuti tutorial-tutorial sebelumnya yaitu :

• Instalasi Laravel pada link : https://copypastekode.blogspot.com/2022/05/tutorial-laravel-9-1-instalasi.html
• Templating dengan Laravel pada link: https://copypastekode.blogspot.com/2022/05/tutorial-laravel-9-2-templating.html

Langkah-langkah membuat CRUD dengan Laravel :

1. Membuat Database baru
2. Menghubungkan database dengan project
3. Membuat Tabel baru di database
4. Membuat Model
5. Membuat Dummy data / data palsu
6. Membuat Controller
7. Membuat view
8. Menambahkan Route
9. Testing Fitur CRUD

Baiklah tanpa perlu berlama-lama langsung saja kita mulai dengan tahap atau langkah yang pertama yaitu membuat tabel baru pada database MySQL.

Membuat Database

Buka XAMPP dan jalankan Apache dan MySQL, seperti petunjuk gambar dibawah :

Setelah itu klik tombol Admin pada baris MySQL, seperti petunjuk gambar dibawah:

Setelah menekan tombol seperti gambar diatas kita akan diarahkan ke phpMyAdmin, kemudian buat database baru dengan nama terserah, disini saya akan menggunakan nama Crud untuk nama database yang akan digunakan, seperti petunjuk dibawah :

Menghubungkan Database 

Buka project Laravel teman-teman pada kode editor, disini saya menggunakan Visual Studio Code (VS Code), saya merekomendasikan teman-teman untuk menggunakan VS Code ini sebagai Code Editor, setelah project sudah terbuka pada code editor cari file dengan nama .env pada project Laravel teman-teman seperti gambar dibawah :

Buka file .env kemudian isikan nama database dengan nama crud, seperti petunjuk gambar dibawah :

Sampai disini kita telah berhasil menghubungkan database dengan project kita.

Membuat Model dan Tabel 

Supaya tutorial nya tidak terlalu panjang disini saya menggabungkan langkah ke-3 dan ke-4 menjadi satu proses.

Buka terminal pada Visual Studio Code dengan short cut Ctrl+` seperti gambar berikut :

kemudian ketikan perintah berikut pada terminal :

1. php artisan make:model Mahasiswa -m

Penjelasan: Perintah diatas adalah untuk membuat Models dengan nama Mahasiswa dan sekaligus membuat file migrations, yang dimana file migrations ini akan menjadi tabel baru di database MySQL kita.

Petunjuk dengan gambar :

Buka folder database/migrations pada project Laravel teman-teman, lalu cari dan buka file dengan nama seperti gambar diatas,kemudian modifikasi sehingga menjadi seperti berikut :

1. <?php
2.  
3. use Illuminate\Database\Migrations\Migration;
4. use Illuminate\Database\Schema\Blueprint;
5. use Illuminate\Support\Facades\Schema;
6.  
7. return new class extends Migration
8. {
9. /**
10.   * Run the migrations.
11.   *
12.   * @return void
13.   */
14. public function up()
15. {
16. Schema::create('mahasiswa', function (Blueprint $table) {
17. $table->id();
18. $table->char('nim', 14);
19. $table->string('nama', 50);
20. $table->enum('jenis_kelamin', ['Laki-laki', 'Perempuan']);
21. $table->enum('prodi', ['Matematika', 'Statistika', 'Sistem Informasi']);
22. $table->timestamps();
23. });
24. }
25.  
26. /**
27.   * Reverse the migrations.
28.   *
29.   * @return void
30.   */
31. public function down()
32. {
33. Schema::dropIfExists('mahasiswa');
34. }
35. };

Langkah selanjutnya adalah menjalankan migration agar file migrations yang telah kita buat akan secara otomatis masuk ke dalam database kita, dengan menuliskan perintah berikut pada terminal :

1. php artisan migrate:refresh --path=database/migrations/nama_file_migrations.php

Penjelasan : perlu diketahui bawah nama dari file migrations tidak selalu sama tergantung tahun, bulan, tanggal dan jam pada saat pembuatan file migrations ini, untuk nama_file_migratios.php isikan dengan nama file migration yang teman-teman buat.

Setelah mengetikkan script : php artisan migrate:refresh --path=database/migrations/nama_file_migrations.php 

lalu tekan enter tunggu sampai proses migrate selesai dijalankan, jika sudah buka database phpMyAdmin kemudian periksa apakah table dengan nama mahasiswa sudah masuk ke dalam database atau belum, jika proses migrate nya berhasil dijalankan seharusnya tabel mahasiswa sudah berada didalam database crud ini.

Sampai disini kita telah berhasil menambahkan tabel baru pada database kita dengan menggunakan fitur Migrate bawaan Laravel.

Selanjutnya modifikasi model Mahasiswa yang sudah dibuat bersamaan dengan file migrate nya, buka folder app/Models temukan file dengan nama Mahasiswa.php , setelah itu modifikasi isi file Mahasiswa.php seperti petunjuk dibawah :

File Mahasiswa.php sebelum modifikasi :

1. <?php
2.  
3. namespace App\Models;
4.  
5. use Illuminate\Database\Eloquent\Factories\HasFactory;
6. use Illuminate\Database\Eloquent\Model;
7.  
8. class Mahasiswa extends Model
9. {
10. use HasFactory;
11. }

File Mahasiswa.php setelah modifikasi :

1. <?php
2.  
3. namespace App\Models;
4.  
5. use Illuminate\Database\Eloquent\Factories\HasFactory;
6. use Illuminate\Database\Eloquent\Model;
7.  
8. class Mahasiswa extends Model
9. {
10. use HasFactory;
11.  
12. protected $table = 'mahasiswa';
13. protected $primaryKey = 'id';
14. protected $fillable = ['nim', 'nama', 'jenis_kelamin', 'prodi'];
15.  
16. }

Membuat Dummy Data

Ketik kan perintah berikut pada terminal :

1. php artisan make:factory MahasiswaFactory --model=Mahasiswa

Tunggu sampai proses selesai, jika sudah buka folder database/factories temukan dan buka file dengan nama MahasiswaFactory.php, kemudian modifikasi

Sebelum modifikasi :

1. <?php
2.  
3. namespace Database\Factories;
4.  
5. use Illuminate\Database\Eloquent\Factories\Factory;
6.  
7. /**
8.  * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Mahasiswa>
9.  */
10. class MahasiswaFactory extends Factory
11. {
12. /**
13.   * Define the model's default state.
14.   *
15.   * @return array<string, mixed>
16.   */
17. public function definition()
18. {
19. return [
20. //
21. ];
22. }
23. }
24.  

Setelah dimodifikasi :

1. <?php
2.  
3. namespace Database\Factories;
4.  
5. use Illuminate\Database\Eloquent\Factories\Factory;
6. use App\Models\Mahasiswa;
7.  
8. /**
9.  * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Mahasiswa>
10.  */
11. class MahasiswaFactory extends Factory
12. {
13. /**
14.   * Define the model's default state.
15.   *
16.   * @return array<string, mixed>
17.   */
18.  
19. protected $model = Mahasiswa::class;
20.  
21. public function definition()
22. {
23. $jenis_kelamin = $this->faker->randomElement($array = array('Laki-laki', 'Perempuan'));
24. $prodi = $this->faker->randomElement($array = array('Matematika', 'Statistika', 'Sistem Informasi'));
25.  
26. return [
27. 'nim' => $this->faker->unique()->numerify(),
28. 'nama' => $this->faker->name(),
29. 'jenis_kelamin' => $jenis_kelamin,
30. 'prodi' => $prodi,
31. ];
32. }
33. }
34.  

Jalankan perintah berikut didalam terminal :

1. $ php artisan tinker

Seperti petunjuk gambar dibawah :

Setelah itu ketikan lagi perintah berikut pada terminal :

1. Mahasiswa::factory()->count(50)->create()

Ikuti petunjuk diatas dan tunggu sampai prosesnya selesai.

Penjelasan : perintah Mahasiswa::factory()->count(50)->create() adalah untuk membuat fakde data atau data palsu pada table mahasiswa di database crud kita, dengan cara ini kita tidak perlu menginput data contoh atau testing satu per satu.

Buka kembali phpMyAdmin kemudian cek apakah fake data yang telah kita buat tadi sudah ada atau belum jika teman-teman mengikuti semua langkah-langkah diatas harusnya sudah ada, seperti contoh gambar dibawah :

Membuat Controller

Ketikan perintah make controller pada terminal untuk membuat controller yang akan kita gunakan untuk membuat fitur CRUD, dengan perintah sebagai berikut :

1. php artisan make:controller MahasiswaController --model=Mahasiswa

Tekan enter setelah mengetikkan baris diatas, tunggu sampai proses pembuatan controller dengan nama ControllerCrud selesai dibuat.

Penjelasan :

•  php artisan make:controller MahasiswaController adalah perintah untuk membuat controller dengan nama "MahasiswaController".
•  --model=Mahasiswa adalah perintah untuk membuat controller, dimana semua method yang kita butuhkan untuk membuat fitur CRUD sudah langsung disediakan oleh Laravel dan mendeklarasikan model yang digunakan pada MahasiswaController

Buka folder app/Http/Controllers kemudian temukan dan buka file dengan nama ControllerCrud.php , kemudian modifikasi.

Sebelum di modifikasi :

<?php

namespace App\Http\Controllers;

use App\Models\Mahasiswa;

use Illuminate\Http\Request;

class MahasiswaController extends Controller

{

    public function index()

    {

        //

    }

    public function create()

    {

        //

    }

    public function store(Request $request)

    {

        //

    }

    public function show(Mahasiswa $mahasiswa)

    {

        //

    }

    public function edit(Mahasiswa $mahasiswa)

    {

        //

    }

    public function update(Request $request, Mahasiswa $mahasiswa)

    {

        //

    }

    public function destroy(Mahasiswa $mahasiswa)

    {

        //

    }

}

Setelah di modifikasi :

<?php

namespace App\Http\Controllers;

use App\Models\Mahasiswa;

use Illuminate\Http\Request;

class MahasiswaController extends Controller

{

    public function index()

    {

        $data = [

            'title' => 'Data Mahasiswa',

            'mahasiswa' => Mahasiswa::latest()->paginate(5),

        ];

        return view('mahasiswa.mahasiswa', $data, compact('data'))

            ->with('i', (request()->input('page', 1) - 1) * 5);

    }

    public function create()

    {

        $data = [

            'title' => 'Tambah Data Mahasiswa',

        ];

        return view('mahasiswa.tambah_mahasiswa', $data);

    }

    public function store(Request $request)

    {

        $validatedData = $request->validate([

            'nim'           =>  ['required', 'unique:mahasiswa', 'max:14'],

            'nama'          => 'required',

            'jenis_kelamin' => 'required',

            'prodi'         => 'required',

        ]);

        Mahasiswa::create($request->all());

        return to_route('mahasiswa.index')->with('success', 'Data Berhasil Ditambahkan');

    }

    public function show(Mahasiswa $mahasiswa)

    {

        //

    }

    public function edit(Mahasiswa $mahasiswa)

    {

        $data = [

            'title' => 'Edit Data Mahasiswa',

            'mahasiswa' => $mahasiswa,

        ];

        return view('mahasiswa.edit_mahasiswa', $data, compact('data'));

    }

    public function update(Request $request, Mahasiswa $mahasiswa)

    {

        if ($request->nim != $mahasiswa->nim) {

            $validatedData = $request->validate([

                'nim'           =>  ['required', 'unique:mahasiswa', 'max:14'],

                'nama'          => 'required',

                'jenis_kelamin' => 'required',

                'prodi'         => 'required',

            ]);

        } else {

            $validatedData = $request->validate([

                'nim'           =>  ['required', 'max:14'],

                'nama'          => 'required',

                'jenis_kelamin' => 'required',

                'prodi'         => 'required',

            ]);

        }

        $mahasiswa->update($request->all());

        return to_route('mahasiswa.index')->with('success', 'Data Berhasil Diupadte');

    }

    public function destroy(Mahasiswa $mahasiswa)

    {

        $mahasiswa->delete();

        return to_route('mahasiswa.index')->with('success', 'Data Berhasil Dihapus');

    }

}

Membuat View

Buat Folder baru dengan nama mahasiswa didalam folder resources/views , seperti contoh gambar dibawah:

Tambahkan file view sebagai berikut:

• mahasiswa.blade.php
• tambah_mahasiswa.blade.php
• edit_mahasiswa.blade.php

Seperti petunjuk gambar berikut :

Buka file edit_mahasiswa.blade.php, kemudian tambahkan script berikut :

1. @extends('templates.index')
2.  
3. @section('content')
4. <div class="card">
5. <div class="card-header">
6.  
7. </div>
8. <div class="card-body">
9. <form action="{{ route('mahasiswa.update', $mahasiswa) }}" method="POST">
10. @method('PUT')
11. @csrf
12. <div class="form-group">
13. <label for="nim">NIM</label>
14. <input type="hidden" name="id" value="{{ $mahasiswa->id }}">
15. <input type="number" name="nim" class="form-control @error('nim') is-invalid @enderror" id="nim"
16. value="{{ old('nim', $mahasiswa->nim) }}" placeholder="Input NIM">
17. @error('nim')
18. <div class="invalid-feedback">
19. {{ $message }}
20. </div>
21. @enderror
22. </div>
23. <div class="form-group">
24. <label for="nama">Nama</label>
25. <input type="text" name="nama" class="form-control @error('nama') is-invalid @enderror" id=" nama"
26. value="{{ old('nama', $mahasiswa->nama) }}" placeholder="Input Nama Mahasiswa">
27. @error('nama')
28. <div class="invalid-feedback">
29. {{ $message }}
30. </div>
31. @enderror
32. </div>
33. <div class="form-row">
34. <div class="form-group col-md-12">
35. <label for="jenis_kelamin">Jenis Kelamin</label>
36. <select name="jenis_kelamin" id="jenis_kelamin"
37. class="@error('jenis_kelamin') is-invalid @enderror custom-select">
38. <option @if ($mahasiswa->jenis_kelamin == 'Laki-laki') selected @endif value="Laki-laki">Laki-laki</option>
39. <option @if ($mahasiswa->jenis_kelamin == 'Perempuan') selected @endif value="Perempuan">Perempuan</option>
40. </select>
41. @error('jenis_kelamin')
42. <div class="invalid-feedback">
43. {{ $message }}
44. </div>
45. @enderror
46. </div>
47. </div>
48. <div class="form-row">
49. <div class="form-group col-md-12">
50. <label for="prodi">Program Studi</label>
51. <select name="prodi" id="prodi" class="@error('prodi') is-invalid @enderror custom-select">
52. <option @if ($mahasiswa->prodi == 'Matematika') selected @endif value="Matematika">Matematika</option>
53.  
54. <option @if ($mahasiswa->prodi == 'Statistika') selected @endif value="Statistika">Statistika</option>
55.  
56. <option @if ($mahasiswa->prodi == 'Sistem Informasi') selected @endif value="Sistem Informasi">Sistem
57. Informasi</option>
58. </select>
59. @error('prodi')
60. <div class="invalid-feedback">
61. {{ $message }}
62. </div>
63. @enderror
64. </div>
65. </div>
66. <div class="text-center">
67. <button type="submit" class="btn btn-primary">Simpan</button>
68. </div>
69. </form>
70. </div>
71. </div>
72. @endsection

Buka file mahasiswa.blade.php, kemudian tambahkan script berikut :

1. @extends('templates.index')
2.  
3. @section('content')
4. @if (session('success'))
5. <div class="alert alert-success">
6. {{ session('success') }}
7. </div>
8. @endif
9.  
10. @if (session('error'))
11. <div class="alert alert-error">
12. {{ session('error') }}
13. </div>
14. @endif
15.  
16. <div class="card">
17. <div class="card-header">
18. <a class="btn btn-sm btn-primary" href="{{ route('mahasiswa.create') }}"> <i class="fa fa-plus-square"></i>
19. Mahasiswa</a>
20. </div>
21. <div class="card-body">
22. <table class="table table-hover table-striped">
23. <thead class="bg-primary">
24. <tr class="text-capitalize">
25. <th>no</th>
26. <th>nim</th>
27. <th>Nama</th>
28. <th>Jenis Kelamin</th>
29. <th>Prodi</th>
30. <th>Opsi</th>
31. </tr>
32. </thead>
33. <tbody>
34. @if (empty($mahasiswa))
35. <span class="alert">data Tidak Ditemukan!</span>
36. @endif
37. @foreach ($mahasiswa as $val => $mhs)
38. <tr>
39. <td>{{ $val + 1 }}</td>
40. <td>{{ $mhs->nim }}</td>
41. <td>{{ $mhs->nama }}</td>
42. <td>{{ $mhs->jenis_kelamin }}</td>
43. <td>{{ $mhs->prodi }}</td>
44. <td>
45. <a class="btn btn-sm btn-info" href="{{ route('mahasiswa.edit', $mhs->id) }}"><i
46. class="fas fa-pen"></i></a>
47. <form action="{{ route('mahasiswa.destroy', $mhs->id) }}" method="post"
48. class="d-inline">
49. @method('delete')
50. @csrf
51. <button type="submit" class="btn btn-sm btn-danger mx-2"><i
52. class="fas fa-trash"></i></button>
53. </form>
54. </td>
55. </tr>
56. @endforeach
57. </tbody>
58. </table>
59. </div>
60. </div>
61. @endsection

Buka file tambah_mahasiswa.blade.php, kemudian tambahkan script berikut :

1. @extends('templates.index')
2.  
3. @section('content')
4. <div class="card">
5. <div class="card-header">
6.  
7. </div>
8. <div class="card-body">
9. <form action="{{ route('mahasiswa.store') }}" method="POST">
10. @csrf
11. <div class="form-group">
12. <label for="nim">NIM</label>
13. <input type="number" name="nim" class="form-control @error('nim') is-invalid @enderror" id="nim"
14. value="{{ old('nim') }}" placeholder="Input NIM">
15. @error('nim')
16. <div class="invalid-feedback">
17. {{ $message }}
18. </div>
19. @enderror
20. </div>
21. <div class="form-group">
22. <label for="nama">Nama</label>
23. <input type="text" name="nama" class="form-control @error('nama') is-invalid @enderror" id=" nama"
24. value="{{ old('nama') }}" placeholder="Input Nama Mahasiswa">
25. @error('nama')
26. <div class="invalid-feedback">
27. {{ $message }}
28. </div>
29. @enderror
30. </div>
31. <div class="form-row">
32. <div class="form-group col-md-12">
33. <label for="jenis_kelamin">Jenis Kelamin</label>
34. <select name="jenis_kelamin" id="jenis_kelamin"
35. class="@error('jenis_kelamin') is-invalid @enderror custom-select">
36. <option value="">-- Pilih Jenis Kelamin --</option>
37. <option value="Laki-laki">Laki-laki</option>
38. <option value="Perempuan">Perempuan</option>
39. </select>
40. @error('jenis_kelamin')
41. <div class="invalid-feedback">
42. {{ $message }}
43. </div>
44. @enderror
45. </div>
46. </div>
47. <div class="form-row">
48. <div class="form-group col-md-12">
49. <label for="prodi">Program Studi</label>
50. <select name="prodi" id="prodi" class="@error('prodi') is-invalid @enderror custom-select">
51. <option value="">-- Pilih Program Studi --</option>
52. <option value="Matematika">Matematika</option>
53. <option value="Statistika">Statistika</option>
54. <option value="Sistem Informasi">Sistem Informasi</option>
55. </select>
56. @error('prodi')
57. <div class="invalid-feedback">
58. {{ $message }}
59. </div>
60. @enderror
61. </div>
62. </div>
63. <div class="text-center">
64. <button type="submit" class="btn btn-primary">Simpan</button>
65. </div>
66. </form>
67. </div>
68. </div>
69. @endsection

Menambahkan Route

Buka file web.php pada folder routes, lalu tambahkan script berikut :

use App\Http\Controllers\MahasiswaController;
 
Route::resource('mahasiswa', MahasiswaController::class);

seperti petunjuk gambar berikut :

Testing Fitur CRUD

Jalakan LDS atau Local Develoment Serve Laravel dengan menuliskan perintah berikut pada terminal :

php artisan serve

Tunggu sampai Local Development Servenya berhasil dijalankan dengan ditandai seperti contoh berikut :

Kemudian buka atau kunjungi URL berikut pada web browser http://127.0.0.1:8000/mahasiswa , maka akan tampil sebagai berikut :

Uji coba fitur Tambah Data, klik tombol tambah data Mahasiswa, maka teman-teman akan diarahkan ke halaman tambah data seperti berikut :

Uji coba fitur Edit Data, klik tombol dengan icon pen, maka teman-teman akan diarahkan ke halaman edit data seperti berikut :

Pada gambar diatas saya mengedit data nama yang sebelumnya Andrian menjadi tes edit, kemudian klik tombol simpan

Setelah mengklik tombol simpan maka akan ada notif atau alert "Data berhasil Diupadate" dan terlihat bawah data dengan nama andrian telah berubah menjadi tes edit.

Untuk testing hapus atau delete data, teman-teman silahkan testing sendiri untuk memastikan apakah fitur hapus data berhasil dijalankan atau tidak.

Sampai disini kita telah berhasil membuat fitur CRUD pada project Laravel, gimana teman-teman mudah bukan? bukan...! 😂

Saya rasa cukup sampai disini dulu tutorial kali ini jika ada yang ingin teman-teman tanyakan jagan ragu untuk bertanya pada kolom komentar dan sampai jumap pada tutorial-turorial berikutnya semoga bermanfaat byee..byee 🙌