Tutorial Membuat CRUD Laravel 9 dengan Bootstrap 5

byindeveloper •
6
Tutorial Membuat CRUD Laravel 9 dengan Bootstrap 5

Assalamualaikum, Pada tutorial kali ini kita akan belajar cara membuat CRUD menggunakan Laravel versi 9. Tidak ada banyak perubahan dari versi sebelumnya dalam kasus pembuatan CRUD ini. Hanya saja yang perlu kita perhatikan, dalam menggunakan Laravel 9 ini kita harus sudah upgrade versi PHP kita minimal versi 8.

Berikut adalah tahap-tahap dalam tutorial kali ini:
  1. Install Laravel 9
  2. Konfigurasi Database
  3. Membuat Migrasi
  4. Membuat Resource Controller dan Route
  5. Membuat View
  6. Hasil Akhir

Langkah 1: Install Laravel 9

Untuk menginstall laravel 9, seperti biasa kita ketikkan perintah berikut pada terminal kita dan tunggu hingga instalasi selesai.

composer create-project --prefer-dist laravel/laravel namaprojek

Langkah 2: Konfigurasi Database

Sebelumnya buat dulu database yang akan kalian pakai pada localhost kalian (Saya asumsikan kalian sudah bisa membuat database-nya). Disini saya menggunakan MySQL pada phpMyAdmin. Setelah selesai membuat database, buka dile .env kalian, lalu setting sesuai nama, username dan password database-yang kalian buat.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel9
DB_USERNAME=root
DB_PASSWORD=

Langkah 3: Membuat Migrasi

Untuk membuat Migrasi, ketikkan perintah berikut:

php artisan make:migration create_students_table --create=students

Jika berhasil, kita akan mendapat file baru pada folder database/migrations dengan nama "2022_02_17_082500_create_students_table.php". Sekarang kita buka file berikut, dan modifikasi file tersebut menjadi seperti berikut:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up()
    {
        Schema::create('students', function (Blueprint $table) {
            $table->id();
            //tambahkan kode berikut
            $table->string('name');
            $table->string('kelas');
            //tambahkan kode di atas
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('students');
    }
};

Sekarang silahkan ketikkan perintah berikut:

php artisan make:migrate

Langkah 4: Membuat Resource Controller dan Route

Buat yang baru tahu route silahkan cek tutorial yang pernah saya buat Disini. Nah dengan resource route ini, kita sudah dapat route untuk membuat fungsi CRUD. Jadi tidak perlu repot-repot membuat masing-masing route untuk CRUD seperti post, get, delete, dan update. 

Tapi sebelumnya kita buat controller untuk user dahulu, kita sudah punya model user, jadi cukup buat controllernya saja. Ketikkan perintah ini di controller.

php artisan make:controller StudentController --resource 

Oke sekarang tambahkan kode berikut pada routes/web.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<?php

use Illuminate\Support\Facades\Route;


Route::get('/', function () {
    return view('welcome');
});

//tambahkan kode berikut
Route::resource('students', StudentController::class);

Pada file Controller yang kita dapat secara otomatis akan terdapat 7 fungsi berikut yang dapat kita gunakan untuk membuat operasi CRUD.
  • index()
  • create()
  • store()
  • show()
  • edit()
  • update()
  • destroy()
Sekarang kita buka app/Http/Controllers/StudentController.php kemudian ketikkan kodenya seperti berikut ini.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<?php
  
namespace App\Http\Controllers;
  
use App\Models\Student;
use Illuminate\Http\Request;
  
class StudentController extends Controller
{

    public function index()
    {
        $students = Student::latest()->paginate(5);
      
        return view('students.index',compact('students'))
            ->with('i', (request()->input('page', 1) - 1) * 5);
    }
  
    public function create()
    {
        return view('students.create');
    }
  
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'kelas' => 'required',
        ]);
      
        Student::create($request->all());
       
        return redirect()->route('students.index')
                        ->with('success','Student created successfully.');
    }
  
    public function show(Student $student)
    {
        return view('students.show',compact('student'));
    }
  
    public function edit(Student $student)
    {
        return view('students.edit',compact('student'));
    }

    public function update(Request $request, Student $student)
    {
        $request->validate([
            'name' => 'required',
            'kelas' => 'required',
        ]);
      
        $student->update($request->all());
      
        return redirect()->route('students.index')
                        ->with('success','Student updated successfully');
    }

    public function destroy(Student $student)
    {
        $student->delete();
       
        return redirect()->route('students.index')
                        ->with('success','Student deleted successfully');
    }
}

Jangan lupa untuk setting nilai $fillable di Model Student berdasarkan data yang ingin dapat kita tambah atau edit, pada kasus ini name dan kelas. 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Student extends Model
{
    use HasFactory;

    //tambahkan kode berikut
    protected $fillable = [
        'name', 'kelas'
    ];
}

Langkah 5: Membuat View

Saya asumsikan kalian sudah mengerti cara templating pada laravel menggunakan blade. Pertama buat folder students pada resources/views. Terakhir buat file-file berikut ini.
  • layout.blade.php
  • index.blade.php
  • create.blade.php
  • edit.blade.php
  • show.blade.php
Kemudian ketikkan kode berikut pada masing-masing file.

layout.blade.php
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 CRUD School Application</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    
<div class="container">
    @yield('content')
</div>
    
</body>
</html>

index.blade.php
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
@extends('students.layout')
 
@section('content')
    <div class="row mt-5">
        <div class="col-lg-12 margin-tb">
            <div class="float-start">
                <h2>Laravel 9 CRUD School Application</h2>
            </div>
            <div class="float-end">
                <a class="btn btn-success" href="{{ route('students.create') }}"> Create New student</a>
            </div>
        </div>
    </div>
   
    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <p>{{ $message }}</p>
        </div>
    @endif
   
    <table class="table table-bordered">
        <tr>
            <th>No</th>
            <th>Name</th>
            <th>Kelas</th>
            <th width="280px">Action</th>
        </tr>
        @foreach ($students as $student)
        <tr>
            <td>{{ ++$i }}</td>
            <td>{{ $student->name }}</td>
            <td>{{ $student->kelas }}</td>
            <td>
                <form action="{{ route('students.destroy',$student->id) }}" method="POST">
   
                    <a class="btn btn-info" href="{{ route('students.show',$student->id) }}">Show</a>
    
                    <a class="btn btn-primary" href="{{ route('students.edit',$student->id) }}">Edit</a>
   
                    @csrf
                    @method('DELETE')
      
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
        @endforeach
    </table>
    <div class="row text-center">
        {!! $students->links() !!}
    </div>
      
@endsection

create.blade.php
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
@extends('students.layout')
  
@section('content')
<div class="row">
    <div class="col-lg-12 margin-tb">
        <div>
            <h2>Add New Student</h2>
        </div>
        <div>
            <a class="btn btn-primary" href="{{ route('students.index') }}"> Back</a>
        </div>
    </div>
</div>
   
@if ($errors->any())
    <div class="alert alert-danger">
        <strong>Whoops!</strong> There were some problems with your input.<br><br>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
   
<form action="{{ route('students.store') }}" method="POST">
    @csrf
  
     <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Name:</strong>
                <input type="text" name="name" class="form-control" placeholder="Name">
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Kelas:</strong>
                <input class="form-control" name="kelas" placeholder="Kelas"></input>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 text-center mt-3">
            <button type="submit" class="btn btn-success">Submit</button>
        </div>
    </div>
   
</form>
@endsection

edit.blade.php
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
@extends('students.layout')
   
@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div>
                <h2>Edit student</h2>
            </div>
            <div>
                <a class="btn btn-primary" href="{{ route('students.index') }}"> Back</a>
            </div>
        </div>
    </div>
   
    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Whoops!</strong> There were some problems with your input.<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
  
    <form action="{{ route('students.update',$student->id) }}" method="POST">
        @csrf
        @method('PUT')
   
         <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Name:</strong>
                    <input type="text" name="name" value="{{ $student->name }}" class="form-control" placeholder="Name">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Kelas:</strong>
                    <input class="form-control" name="kelas" placeholder="Kelas" value="{{ $student->kelas }}">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 text-center mt-3">
              <button type="submit" class="btn btn-success">Submit</button>
            </div>
        </div>
   
    </form>
@endsection

show.blade.php
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@extends('students.layout')
  
@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div>
                <h2> Show student</h2>
            </div>
            <div>
                <a class="btn btn-primary" href="{{ route('students.index') }}"> Back</a>
            </div>
        </div>
    </div>
   
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Name:</strong>
                {{ $student->name }}
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Kelas:</strong>
                {{ $student->kelas }}
            </div>
        </div>
    </div>
@endsection

Langkah 6: Hasil Akhir 

Untuk menjalankan projek, ketikkan ini pada command-line.

php artisan serve

Akses dengan url localhost:8000/students maka kurang lebih hasilnya seperti berikut:

Tutorial Membuat CRUD Laravel 9 dengan Bootstrap 5


Untuk kalian yang ingin melihat perbandingan CRUD Versi 8 atau versi 6 atau versi 5, silahkan Klik link berikut:


Sekian semoga bermanfaat, Wassalamualaikum, wr. wb 
Tags:

6 Komentar

  1. Yuki Ryu18 Februari 2022 pukul 05.02

    Tadi saya komen cuma pakai name doang terkirim tapi gak tampil. Jadinya saya coba komen ulang.

    Untuk CRUD yg pakai slug ada kak?

    BalasHapus
  2. Mister Anon10 Februari 2023 pukul 16.17

    terimakasih infonyaaa sangat bermanfaat dan bisa dilakukan

    BalasHapus
  3. MonterStone20 Mei 2023 pukul 00.27

    Hadehh ga jelas, udah dijalanin banyak errornya. sampe gw joki anjir ketemen. hadeh

    BalasHapus
  4. Kurniawan Hendy Pangestu20 Mei 2023 pukul 00.28

    Ya ampun, udah ku ikutin code diatas, tapi kok salah terus

    BalasHapus
  5. sinta rajagugug20 Mei 2023 pukul 00.29

    ada yang tau, kok $students not defined?

    BalasHapus
    Balasan
    1. Anonim19 Juni 2023 pukul 19.42

      buat modelnya jalankan perintah berikut di terminal
      php artisan make:model Student
      Tutorial d atas belum ada ini

      Hapus
Lebih baru Lebih lama