Tutorial membuat CRUD pada laravel #2 - Tech Tutor

CRUD merupakan kepanjangan dari Create, Read, Update, dan Delete. CRUD merupakan serangkaian fungsi yang sangat penting dalam manajemen database, terutama pada laravel. CRUD meliputi:

1. Create yaitu membuat data
2. Read yaitu membaca/menampilkan data
3. Update yaitu mengedit/memperbarui data
4. Delete yaitu menghapus data

Di artikel kali ini, saya akan menampilkan tutorial cara membuat CRUD pada database laravel.

Langkah pertama, siapkan teks editor untuk persiapan membuat struktur database

Sebelumnya jangan lupa untuk menyalakan server apache dan mysql pada xampp serta menyalakan server laravel. Jika sudah, buka visual code studio. Disini kalian bisa menggunakan teks editor lainnya, namun saran saya lebih baik menggunakan visual code studio karena visual code studio dilengkapi dengan terminal yang akan dibutuhkan untuk database laravel nantinya. Kalian bisa kunjungi situs resminya, code.visualstudio.com jika belum menginstal.

Tetapi jika visual code studio tidak kompatibel dengan laptop/pc kalian, maka tidak masalah jika menggunakan teks editor lainnya. Bagaimana dengan terminalnya? Bisa gunakan cmd. Tetapi cmdnya kan digunakan untuk menyalakan server, solusinya seperti apa? Gunakan shell yang telah disediakan oleh xampp.

Masuk ke shellnya dan ketikkan ‘cd htdocs\projek-laravel’ untuk masuk ke direktorinya. Projek-laravel itu adalah folder yang saya buat di artikel sebelumnya. Setelah masuk ke direktorinya, maka kalian bisa menjadikannya sebagai pengganti terminal di visual studio code. Namun disini saya hanya lebih memilih menggunakan visual studio code.

Langkah kedua, membuat struktur migrasi untuk database

Buka folder projek-laravel pada visual studio code, untuk membukanya bisa menekan tulisan file yang berada di dekat logo visual studio code. Disana terdapat opsi open folder.

Setelah membuka folder projek-laravel, maka buka terminal dengan menekan ctrl + j dan ketikkan ‘php artisan make:migration create_projek_table’. Projek adalah nama bebas. Setelah membuatnya, file tersebut akan berada di folder projek-laravel\database\migrations\2024_09_05_004539_create_projek_table.php

2024_09_05 adalah tanggalan pembuatannya sedangkan 004539 adalah waktu pembuatannya dalam format 24 jam. Mungkin namanya akan berubah, tergantung kapan kalian membuatnya. File tersebut adalah file migrasi yang akan ditambahkan kedalam database nantinya.

Masuk ke file migrasi tersebut dan ketikkan skrip dibawah ini:

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('projek', function (Blueprint $table) {
            $table->id();
            $table->string('nama');
            $table->integer('kelas');
            $table->string('jurusan');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('projek');
    }
};

Setelah itu save. Masuk kembali ke terminal dan ketikkan 'php artisan make:model Projek'. Seperti biasa projek adalah nama bebas. Jika sudah maka file model bernama Projek.php akan muncul. File tersebut berada di folder projek-laravel\app\models\Projek.php. Buka file Projek.php dan ketikkan:

<?php
namespace App\Models;

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

class Projek extends Model
{
    use HasFactory;

    protected $table = 'projek';
    protected $fillable = [
        'nama',
        'kelas',
        'jurusan',
    ];
}

Setelah itu save. Kemudian masuk ke dalam file .env yang berada di dalam folder projek.php. Hapus pagar pada DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, dan DB_PASSWORD. Ubah juga DB_CONNECTION dari sqlite menjadi mysql. Setelah itu ketikkan DB_COLLATION dibawah DB_PASSWORD. Kira kira seperti ini contohnya:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_projek
DB_USERNAME=root
DB_PASSWORD=
DB_COLLATION=utf8mb4_general_ci

Skrip ini yang akan berguna untuk melakukan migrasi menuju phpmyadmin. Untuk db_projek adalah nama databasenya, namanya bisa bebas. Jika phpmyadmin kalian memiliki password maka isi passwordnya di DB_PASSWORD. Namun jika tidak maka kosongkan saja. Untuk collationnya bisa bebas namun saya sarankan menggunakan utf8mb4_general_ci

Jika semua sudah dilakukan maka buka terminal dan ketikkan 'php artisan migrate' jika ada pertanyaan, maka tekan enter saja. Untuk melihat tabel yang telah dimigrasi maka buka phpmyadmin dengan mengetik di browser 'localhost/phpmyadmin' (jangan lupa untuk menyalakan server apache dan mysql).

Langkah kedua, membuat controller untuk CRUD

Masuk kembali ke visual code studio dan buat satu folder baru bernama projek didalam projek-laravel\resource\views. Setelah itu buat tiga file di dalam folder projek dengan nama:

1. index.blade.php (untuk menampilkan data)
2. create.blade.php (untuk membuat data)
3. edit.blade.php (untuk mengedit data)

Setelah itu ketikkan di terminal, 'php artisan make:controller ProjekController'. seperti biasa Projek adalah nama bebas juga, kalian bisa bebas menamainya namun jangan lupa untuk menyertakan kata Controller agar sebagai penanda untuk file controller. File tersebut akan berada di folder projek-laravel\app\Http\controller\ProjekController.php. Masuk ke file ProjekController.php dan ketikan:

<?php
use App\Models\Projek; 
use Illuminate\View\View;
use Illuminate\Http\Request;
use Illuminate\Http\RedirectResponse;
use Illuminate\Support\Facades\Storage;

class ProjekController extends Controller
{
    public function index() : View
    {
        $projek = Projek::all();
        return view('projek.index', compact('projek'));
    }
}

Skrip index adalah metode untuk Read atau menampilkan data. use App\Models\Projek; untuk memanggil file model projek.php sedangkan public function index() untuk menampilkan data. Untuk projek.index adalah nama folder dan file. projek adalah nama folder yang dibuat sebelumnya dan index adalah nama file untuk index.blade.php.

Selain index, kita akan membuat skrip fungsi untuk membuat create, update, dan delete. Semua itu harus berada di dalam class ProjekController extends Controller {} seperti gambar di atas.

Setelah itu ketikkan lagi skrip dibawah fungsi index seperti berikut:

public function create(): View
{
    return view('projek.create');
}

Setelah itu ketikkan lagi skrip dibawah fungsi create seperti berikut:

public function store(Request $request): RedirectResponse
{
    $request->validate([
        'nama'         => 'required|string|max:255',
        'kelas'        => 'required|numeric',
        'jurusan'      => 'required|string|max:255'
    ]);

    Projek::create([
        'nama'          => $request->nama,
        'kelas'         => $request->kelas,
        'jurusan'       => $request->jurusan,
    ]);

    return redirect()->route('projek.index')->with(['success' => 'Data Berhasil Disimpan!']);
}

Kedua fungsi create dan store saling berhubungan karena itu berfungsi sebagai metode create. Setelah itu ketikkan lagi skrip dibawah store seperti berikut:

public function edit(string $id): View
{
    $projek = Projek::findOrFail($id);

    return view('projek.edit', compact('projek'));
}

Setelah itu ketikkan lagi skrip dibawah edit seperti berikut:

public function update(Request $request, $id): RedirectResponse
{
    $request->validate([
        'nama'         => 'required|string|max:255',
        'kelas'        => 'required|numeric',
        'jurusan'      => 'required|string|max:255'
    ]);

    $projek = Projek::findOrFail($id);

    $projek->update([
        'nama'          => $request->nama,
        'kelas'         => $request->kelas,
        'jurusan'       => $request->jurusan,
    ]);

    return redirect()->route('projek.index')->with(['success' => 'Data Berhasil Diubah!']);
}

Sama seperti create dan store, skrip edit dan update juga saling berhubungan karena merupakan metode untuk update.

Terakhir dibawah skrip update, masukkan skrip dibawah ini:

public function destroy(string $id): RedirectResponse
{
    $projek = Projek::findOrFail($id);

    $projek->delete();

    return redirect()->route('projek.index')->with(['success' => 'Data Berhasil Dihapus!']);
}

Ini adalah skrip untuk membuat metode delete. Setelah itu save jika seluruh skrip untuk membuat fungsi metode CRUD selesai dibuat.

Langkah ketiga, membuat routing untuk CRUD

Routing CRUD berguna untuk menentukan permintaan user. Untuk membuat routing maka masuk ke dalam file web.php yang berada di projek-laravel\routes\web.php. Setelah itu ketikkan skrip seperti berikut:

<?php
use App\Http\Controllers\ProjekController;
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use Illuminate\Support\Facades\Hash;
use Illuminate\Http\Request;

Route::get('/projek', [ProjekController::class, 'index'])->name('projek.index');
Route::get('/projek/create', [ProjekController::class, 'create'])->name('projek.create');
Route::post('/projek', [ProjekController::class, 'store'])->name('projek.store');
Route::get('/projek/edit/{id}', [ProjekController::class, 'edit'])->name('projek.edit');
Route::put('/projek/{id}', [ProjekController::class, 'update'])->name('projek.update');
Route::delete('/projek/{id}', [ProjekController::class, 'destroy'])->name('projek.destroy');

Ini adalah skrip routing yang mencakup metode CRUD. Untuk mengecek apakah routing telah terdaftar, ketikkan di terminal 'php artisan route:list'

Langkah keempat, membuat resource untuk CRUD

Sebelumnya kita sudah membuat index.blade.php di dalam folder projek. Buka file index.blade.php dan ketikkan skrip simpel seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Daftar Data Siswa</title>
</head>
<body>
    <h1>Daftar Data Siswa</h1>
    <a href="{{ route('projek.create') }}">Tambah Data Siswa</a>
    <table>
        <thead>
            <tr>
                <th>Nama</th>
                <th>Kelas</th>
                <th>Jurusan</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($projek as $p)
            <tr>
                <td>{{ $p->nama }}</td>
                <td>{{ $p->kelas }}</td>
                <td>{{ $p->jurusan }}</td>
                <td>
                    <form onsubmit="return confirm('Apakah Anda Yakin ingin menghapus data ini?');" 
                        action="{{ route('projek.destroy', $p->id) }}" method="POST">
                        <a href="{{ route('projek.edit', $p->id) }}">Edit</a>
                            @csrf
                            @method('DELETE')
                        <button type="submit">Delete</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</body>
</html>

Ini adalah skrip untuk menampilkan data. Selain menampilkan data, skrip ini juga mencakup metode delete. Kemudian masuk ke file create.blade.php dan ketikkan skrip berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Tambah Data Siswa</title>
</head>
<body>
    <h1>Tambah Data Siswa</h1>
    <form action="{{ route('projek.store') }}" method="POST">
        @csrf
            <label for="nama">Nama:</label>
            <input type="text" id="nama" name="nama" required>

            <label for="kelas">Kelas:</label>
            <input type="text" id="kelas" name="kelas" required>

            <label for="jurusan">Jurusan:</label>
            <input type="text" id="jurusan" name="jurusan" required>

            <button type="submit">Simpan</button>
            <a href="{{ route('projek.index') }}">Kembali</a>
    </form>
</body>
</html>

Ini adalah skrip untuk membuat data. Setelah itu masuk ke file edit.blade.php dan ketikkan skrip berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Edit Data Siswa</title>
</head>
<body>
    <h1>Edit Data Siswa</h1>
        <form action="{{ route('projek.update', $projek->id) }}" method="POST">
            @csrf
            @method('PUT')
                <label for="nama">Nama:</label>
                <input type="text" id="nama" name="nama" value="{{ $projek->nama }}" required>
    
                <label for="kelas">Kelas:</label>
                <input type="text" id="kelas" name="kelas" value="{{ $projek->kelas }}" required>
    
                <label for="jurusan">Jurusan:</label>
                <input type="text" id="jurusan" name="jurusan" value="{{ $projek->jurusan }}" required>
    
                <button type="submit" >Update</button>
                <a href="{{ route('projek.index') }}">Kembali</a>
        </form>
</body>
</html>

Terakhir ini adalah skrip untuk mengedit data.

Setelah ketiga file tersebut dibuatkan skripnya maka untuk mengecek apakah skrip tersebut telah bekerja, buka browser dan ketikkan 'localhost:8000/projek' (seperti biasa, jangan lupa server apache dan mysql pada xampp sudah nyala serta server laravel juga sudah nyala)

Terlihat bahwa skrip yang kita buat sebelumnya telah menampilkan tampilan html yang cukup simpel. Disitu kalian bisa membuat data baru, mengeditnya, dan bahkan menghapus data sesuai dengan skrip controller yang dibuat sebelumnya.

Kalian juga bisa menghiasnya dengan menambahkan elemen css, javascript, atau menggunakan aset yang dimiliki bootstrap. Untuk semua file skripnya jika kalian ingin melihat lebih lanjut kalian bisa pergi ke github saya

Terima kasih....