Tutorial Belajar CRUD di Laravel untuk Pemula

Pernahkah kamu mendengar istilah CRUD? Di dunia web development, CRUD adalah singkatan dari Create, Read, Update, Delete, yang merupakan operasi dasar untuk mengelola data dalam database. Nah, di tutorial ini, kita akan belajar cara membuat aplikasi CRUD dengan menggunakan framework Laravel yang powerful dan populer.


Siapa yang Bisa Mengikuti Tutorial Ini?

Tutorial ini dirancang khusus untuk pemula yang ingin mempelajari dasar-dasar Laravel dan CRUD. Kamu tidak perlu memiliki pengalaman sebelumnya dengan Laravel atau framework PHP lainnya. Yang kamu butuhkan hanyalah semangat untuk belajar dan komputer dengan koneksi internet.


Apa yang Akan Kita Pelajari?

Di tutorial ini, kita akan membahas langkah-langkah berikut:

  1. Instalasi Laravel: Kita akan mempelajari cara menginstal Laravel di komputer kamu.
  2. Membuat Model dan Migration: Kita akan membuat model Laravel untuk mewakili data sepatu sneaker dan migration untuk membuat tabel di database.
  3. Menampilkan Data: Kita akan belajar cara menampilkan daftar sepatu sneaker dari database.
  4. Menambahkan Data Baru: Kita akan belajar cara membuat formulir untuk menambahkan sepatu sneaker baru ke database.
  5. Mengedit Data: Kita akan belajar cara mengedit informasi sepatu sneaker yang sudah ada.
  6. Menghapus Data: Kita akan belajar cara menghapus sepatu sneaker dari database.


Proses CRUD pada Aplikasi

Contoh Kasus:

Sepanjang tutorial ini, kita akan membangun aplikasi CRUD untuk mengelola koleksi sepatu sneaker. Kamu dapat menyesuaikannya dengan kebutuhan kamu sendiri, seperti mengelola koleksi buku, film, atau apa pun yang kamu inginkan.

Persiapan

Sebelum memulai, pastikan kamu memiliki perangkat lunak berikut:

  • Editor teks: Kamu dapat menggunakan editor teks favoritmu, seperti Visual Studio Code, Sublime Text, atau Notepad++.
  • Web server: Kamu dapat menggunakan web server lokal seperti XAMPP atau WAMP.
  • Composer: Composer adalah tool untuk mengelola dependency PHP. Kamu dapat mendownloadnya dari https://getcomposer.org/download/.

Mari kita mulai untuk Coding


1. Instalasi Laravel

Buka Command Prompt (Windows) atau Terminal (Mac/Linux) di komputer kamu. Arahkan direktori ke lokasi yang ingin kamu install Laravel (misalnya, C:\htdocs di Windows). Lalu, jalankan perintah berikut:

composer create-project laravel/laravel project-name

Ganti "project-name" dengan nama project Laravel kamu (misalnya, "sneaker-collection"). Tunggu proses instalasi selesai.


Akses folder project Laravel kamu di browser dengan membuka URL http://localhost/project-name/public. atau menggunakan perintah php artisan serve

Catatan:

  • Pastikan kamu terhubung dengan internet selama proses instalasi.
  • Jika kamu mengalami kendala saat instalasi, periksa kembali apakah semua persyaratan terpenuhi dan kamu menjalankan perintah dengan benar.
  • Kamu dapat menemukan informasi lebih lengkap tentang instalasi Laravel di dokumentasi resmi: https://laravel.com/docs/11.x/installation

2. Membuat Model dan Migration

Memulai dengan Model Eloquent

Langkah pertama dalam membangun aplikasi CRUD adalah mendefinisikan model yang merepresentasikan data yang ingin kita kelola. Dalam kasus ini, model kita adalah Sneaker yang mewakili koleksi sepatu sneaker kita. Kita dapat menggunakan Artisan CLI untuk membuat model baru bernama Sneaker:

php artisan make:model Sneaker

Perintah ini akan menghasilkan file Sneaker.php di direktori app/Models. Di dalam file ini, kita dapat mendefinisikan properti yang mewakili atribut sepatu sneaker, seperti nama, merek, ukuran, harga, dan deskripsi. Kita juga dapat menentukan aturan validasi untuk properti-properti ini.


<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Sneaker extends Model
{
    protected $fillable = [
        'name',
        'brand',
        'size',
        'price',
        'description',
    ];

    protected $rules = [
        'name' => 'required|max:255',
        'brand' => 'required|max:255',
        'size' => 'required|integer|min:1',
        'price' => 'required|numeric|min:0',
        'description' => 'nullable',
    ];
}

Merancang Migrasi Database

Setelah mendefinisikan model, langkah selanjutnya adalah membuat migrasi database untuk membuat tabel yang sesuai di database. Kita dapat menggunakan Artisan CLI untuk membuat migrasi baru bernama create_sneakers_table:


php artisan make:migration create_sneakers_table

Perintah ini akan menghasilkan file create_sneakers_table.php di direktori database/migrations. Di dalam file ini, kita dapat menggunakan Class Blueprint Laravel untuk mendefinisikan struktur tabel, termasuk nama kolom, tipe data, dan constraint.


<?php

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

class CreateSneakersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('sneakers', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('brand');
            $table->integer('size');
            $table->decimal('price', 10, 2);
            $table->text('description')->nullable();
            $table->timestamps();
        });
    }

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

Setelah mendefinisikan struktur tabel, kita dapat menjalankan migrasi untuk membuat tabel di database menggunakan Artisan CLI:


php artisan migrate

Dengan menyelesaikan langkah-langkah di atas, kita telah membangun fondasi data untuk aplikasi CRUD koleksi sepatu sneaker kita. Model Sneaker mendefinisikan representasi data sepatu sneaker, dan migrasi database telah membuat tabel sneakers untuk menyimpan data tersebut. Di bagian selanjutnya, kita akan melanjutkan dengan membangun fitur-fitur CRUD untuk mengelola data sepatu sneaker di aplikasi kita.

Catatan:

  • Pastikan kamu telah terhubung ke database sebelum menjalankan migrasi.
  • Kamu dapat memperluas model dan migrasi dengan menambahkan kolom, constraint, dan relationship sesuai kebutuhan aplikasi kamu.
  • Dokumentasi resmi Laravel menyediakan informasi lebih lanjut tentang model Eloquent dan migrasi database:

3. Menampilkan Data

Menampilkan Koleksi Sepatu Sneaker: Select Data

Saatnya menghidupkan koleksi sepatu sneaker kita! Di bagian ini, kita akan belajar cara menampilkan daftar sepatu sneaker yang tersimpan di database.

Menggunakan Route dan Controller

Langkah pertama adalah mendefinisikan route untuk mengakses daftar sepatu sneaker. Kita dapat menambahkan route baru di file routes/web.php:

Route::get('/sneakers', [SneakerController::class, 'index']);

Route ini akan mengarahkan URL /sneakers ke method index pada controller SneakerController. Selanjutnya, kita perlu membuat controller SneakerController dan method index:

<?php

namespace App\Http\Controllers;

use App\Models\Sneaker;

class SneakerController extends Controller
{
    public function index()
    {
        // Mengambil semua data sepatu sneaker dari database
        $sneakers = Sneaker::all();

        // Mengembalikan data ke view dengan nama 'sneakers'
        return view('sneakers.index', ['sneakers' => $sneakers]);
    }
}

Membuat View untuk Menampilkan Data

Sekarang, kita perlu membuat view untuk menampilkan daftar sepatu sneaker. Buat file index.blade.php di direktori resources/views/sneakers:

@extends('layouts.app')

@section('content')
    <h1>Koleksi Sepatu Sneaker</h1>

    @if (count($sneakers) > 0)
        <table class="table">
            <thead>
                <tr>
                    <th>Nama</th>
                    <th>Merek</th>
                    <th>Ukuran</th>
                    <th>Harga</th>
                    <th>Deskripsi</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($sneakers as $sneaker)
                    <tr>
                        <td>{{ $sneaker->name }}</td>
                        <td>{{ $sneaker->brand }}</td>
                        <td>{{ $sneaker->size }}</td>
                        <td>Rp{{ number_format($sneaker->price, 2, ',', '.') }}</td>
                        <td>{{ $sneaker->description }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @else
        <p>Koleksi sepatu sneaker kamu masih kosong!</p>
    @endif
@endsection

View ini menggunakan Blade templating engine Laravel untuk menampilkan daftar sepatu sneaker, Jika kamu belum paham apa itu Blade Templating dan Layouting di Laravel, silahkan baca artikel berikut (Tutorial Blade Templates & Layouts di Laravel), Baik kita lanjutkan untuk menampilkan Data. Data sepatu sneaker diakses dari variabel $sneakers yang dipassing dari controller.

Penjelasan Syntax :

  • @extends('layouts.app'): Menyatukan view ini dengan layout dasar yang kemungkinan berisi header, footer, dan elemen HTML lainnya.
  • @section('content'): Mendefinisikan section konten utama untuk view ini.
  • @if (count($sneakers) > 0): Memeriksa apakah terdapat data sepatu sneaker dalam variabel $sneakers. Jika ada (lebih dari 0), kode di dalam block ini akan dieksekusi.
  • {{ $sneaker->name }}: Menampilkan nilai atribut name dari model Sneaker untuk setiap baris.
  • @foreach ($sneakers as $sneaker): Perulangan untuk menampilkan setiap data sepatu sneaker dalam variabel $sneakers.
  • {{ $sneaker->description }}: Menampilkan nilai atribut description dari model Sneaker.
  • @endsection: Menutup section konten.

Jalankan server Laravel kamu dan akses URL /sneakers di browser. Kamu akan melihat daftar sepatu sneaker dari database.

Catatan:

  • Pastikan kamu telah menyelesaikan langkah-langkah di bagian sebelumnya (Instalasi Laravel, Membuat Model dan Migration) sebelum melanjutkan.
  • Kamu dapat memodifikasi view index.blade.php untuk menampilkan informasi sepatu sneaker dengan gaya yang berbeda sesuai keinginanmu.
  • Dokumentasi Blade templating engine Laravel menyediakan informasi lebih lanjut tentang sintaks dan fitur-fiturnya: https://laravel.com/docs/11.x/blade

4. Menambahkan Data Baru

Menambah Koleksi Sepatu Sneaker Baru: Mengisi Rak Sepatu Virtual.

Sekarang, saatnya memperluas koleksi sepatu sneaker kita dengan menambahkan item baru! Di bagian ini, kita akan belajar cara membuat formulir untuk menambahkan data sepatu sneaker baru ke database.

Membuat Route dan Controller

Pertama, kita perlu mendefinisikan route untuk mengakses formulir penambahan sepatu sneaker baru. Tambahkan route berikut di file routes/web.php:

Route::get('/sneakers/create', [SneakerController::class, 'create']);
Route::post('/sneakers', [SneakerController::class, 'store']);

Route GET /sneakers/create akan mengarahkan ke method create pada controller SneakerController. Route POST /sneakers akan menangani proses submit form penambahan sepatu sneaker dan diarahkan ke method store pada controller yang sama.

Selanjutnya, kita perlu membuat method create dan store pada controller SneakerController:


<?php

namespace App\Http\Controllers;

use App\Models\Sneaker;
use Illuminate\Http\Request;

class SneakerController extends Controller
{
    public function create()
    {
        return view('sneakers.create');
    }

    public function store(Request $request)
    {
        // Validasi input dari formulir
        $request->validate([
            'name' => 'required|max:255',
            'brand' => 'required|max:255',
            'size' => 'required|integer|min:1',
            'price' => 'required|numeric|min:0',
            'description' => 'nullable',
        ]);

        // Menambahkan data sepatu sneaker baru ke database
        Sneaker::create($request->all());

        // Mengirim pesan flash success
        $request->session()->flash('success', 'Sepatu sneaker baru berhasil ditambahkan!');

        // Mengarahkan kembali ke halaman daftar sepatu sneaker
        return redirect('/sneakers');
    }
}

Membuat View untuk Formulir

Sekarang, kita perlu membuat view untuk formulir penambahan sepatu sneaker baru. Buat file create.blade.php di direktori resources/views/sneakers:


@extends('layouts.app')

@section('content')
    <h1>Tambah Sepatu Sneaker Baru</h1>

    <form method="POST" action="/sneakers">
        @csrf

        <div class="mb-3">
            <label for="name" class="form-label">Nama</label>
            <input type="text" class="form-control" id="name" name="name" required>
        </div>

        <div class="mb-3">
            <label for="brand" class="form-label">Merek</label>
            <input type="text" class="form-control" id="brand" name="brand" required>
        </div>

        <div class="mb-3">
            <label for="size" class="form-label">Ukuran</label>
            <input type="number" class="form-control" id="size" name="size" required min="1">
        </div>

        <div class="mb-3">
            <label for="price" class="form-label">Harga</label>
            <input type="number" class="form-control" id="price" name="price" required min="0">
        </div>

        <div class="mb-3">
            <label for="description" class="form-label">Deskripsi</label>
            <textarea class="form-control" id="description" name="description" rows="3"></textarea>
        </div>

        <button type="submit" class="btn btn-primary">Tambah</button>
    </form>
@endsection

View ini menggunakan form HTML dengan metode POST dan action /sneakers. Form ini berisi input field untuk nama, merek, ukuran, harga, dan deskripsi sepatu sneaker.

Penjelasan Syntax:

  • @extends('layouts.app'): Menyatukan view ini dengan layout dasar yang kemungkinan berisi header, footer, dan elemen HTML lainnya.
  • @section('content'): Mendefinisikan section konten utama untuk view ini.

5. Mengedit Data

Mengedit Koleksi Sepatu Sneaker: Memperbarui Rak Sepatu Virtual

Di bagian ini, kita akan belajar cara mengedit informasi sepatu sneaker yang sudah ada di database. Kita akan membuat formulir untuk mengedit data dan memperbaruinya di database.

Membuat Route dan Controller

Pertama, kita perlu mendefinisikan route untuk mengakses formulir edit dan menangani proses update. Tambahkan route berikut di file routes/web.php:


Route::get('/sneakers/{sneaker}', [SneakerController::class, 'edit']);
Route::put('/sneakers/{sneaker}', [SneakerController::class, 'update']);

Route GET /sneakers/{sneaker} akan mengarahkan ke method edit pada controller SneakerController dengan parameter sneaker yang merupakan ID dari sepatu sneaker yang ingin diedit. Route PUT /sneakers/{sneaker} akan menangani proses submit form edit dan diarahkan ke method update pada controller yang sama.

Selanjutnya, kita perlu membuat method edit dan update pada controller SneakerController:


<?php

namespace App\Http\Controllers;

use App\Models\Sneaker;
use Illuminate\Http\Request;

class SneakerController extends Controller
{
    public function edit(Sneaker $sneaker)
    {
        return view('sneakers.edit', ['sneaker' => $sneaker]);
    }

    public function update(Request $request, Sneaker $sneaker)
    {
        // Validasi input dari formulir
        $request->validate([
            'name' => 'required|max:255',
            'brand' => 'required|max:255',
            'size' => 'required|integer|min:1',
            'price' => 'required|numeric|min:0',
            'description' => 'nullable',
        ]);

        // Memperbarui data sepatu sneaker di database
        $sneaker->update($request->all());

        // Mengirim pesan flash success
        $request->session()->flash('success', 'Sepatu sneaker berhasil diperbarui!');

        // Mengarahkan kembali ke halaman daftar sepatu sneaker
        return redirect('/sneakers');
    }
}

Membuat View untuk Formulir Edit

Sekarang, kita perlu membuat view untuk formulir edit sepatu sneaker. Buat file edit.blade.php di direktori resources/views/sneakers:


@extends('layouts.app')

@section('content')
    <h1>Edit Sepatu Sneaker</h1>

    <form method="PUT" action="/sneakers/{{ $sneaker->id }}">
        @csrf

        <div class="mb-3">
            <label for="name" class="form-label">Nama</label>
            <input type="text" class="form-control" id="name" name="name" value="{{ $sneaker->name }}" required>
        </div>

        <div class="mb-3">
            <label for="brand" class="form-label">Merek</label>
            <input type="text" class="form-control" id="brand" name="brand" value="{{ $sneaker->brand }}" required>
        </div>

        <div class="mb-3">
            <label for="size" class="form-label">Ukuran</label>
            <input type="number" class="form-control" id="size" name="size" value="{{ $sneaker->size }}" required min="1">
        </div>

        <div class="mb-3">
            <label for="price" class="form-label">Harga</label>
            <input type="number" class="form-control" id="price" name="price" value="{{ $sneaker->price }}" required min="0">
        </div>

        <div class="mb-3">
            <label for="description" class="form-label">Deskripsi</label>
            <textarea class="form-control" id="description" name="description" rows="3">{{ $sneaker->description }}</textarea>
        </div>

        <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
    </form>
@endsection

View ini menggunakan form HTML dengan metode PUT dan action /sneakers/{sneaker}. Action URL diubah untuk menyertakan ID sepatu sneaker yang ingin diedit. Form ini berisi input field dengan nilai awal yang diambil dari data sepatu sneaker yang diambil dari parameter $sneaker.


6. Menghapus Data

Menghapus Data Sepatu Sneaker

Di bagian ini, kita akan menyelesaikan fitur CRUD terakhir, yaitu menghapus data sepatu sneaker dari database.

Membuat Route dan Controller

Pertama, kita perlu mendefinisikan route untuk menangani proses penghapusan data sepatu sneaker. Tambahkan route berikut di file routes/web.php:


Route::delete('/sneakers/{sneaker}', [SneakerController::class, 'destroy']);

Route DELETE /sneakers/{sneaker} akan diarahkan ke method destroy pada controller SneakerController dengan parameter sneaker yang merupakan ID dari sepatu sneaker yang ingin dihapus.

Selanjutnya, kita perlu membuat method destroy pada controller SneakerController:


<?php

namespace App\Http\Controllers;

use App\Models\Sneaker;
use Illuminate\Http\Request;

class SneakerController extends Controller
{
    // ... method lain ...

    public function destroy(Sneaker $sneaker)
    {
        // Menghapus data sepatu sneaker dari database
        $sneaker->delete();

        // Mengirim pesan flash success
        request()->session()->flash('success', 'Sepatu sneaker berhasil dihapus!');

        // Mengarahkan kembali ke halaman daftar sepatu sneaker
        return redirect('/sneakers');
    }
}

Menambahkan Tombol Hapus

Kita perlu menambahkan tombol hapus di view index.blade.php untuk setiap item sepatu sneaker. Modifikasi view seperti berikut:


@extends('layouts.app')

@section('content')
    <h1>Koleksi Sepatu Sneaker</h1>

    @if (count($sneakers) > 0)
        <table class="table">
            <thead>
                <tr>
                    <th>Nama</th>
                    <th>Merek</th>
                    <th>Ukuran</th>
                    <th>Harga</th>
                    <th>Deskripsi</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($sneakers as $sneaker)
                    <tr>
                        <td>{{ $sneaker->name }}</td>
                        <td>{{ $sneaker->brand }}</td>
                        <td>{{ $sneaker->size }}</td>
                        <td>Rp{{ number_format($sneaker->price, 2, ',', '.') }}</td>
                        <td>{{ $sneaker->description }}</td>
                        <td>
                            <a href="/sneakers/{{ $sneaker->id }}/edit" class="btn btn-sm btn-primary">Edit</a>
                            <form action="/sneakers/{{ $sneaker->id }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger">Hapus</button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @else
        <p>Koleksi sepatu sneaker kamu masih kosong!</p>
    @endif
@endsection

Penjelasan Syntax

  • <td><a href="/sneakers/{{ $sneaker->id }}/edit" class="btn btn-sm btn-primary">Edit</a></td>: Menambahkan tombol "Edit" untuk mengarahkan ke formulir edit sepatu sneaker.
  • <td><form action="/sneakers/{{ $sneaker->id }}" method="POST"> @csrf @method('DELETE') <button type="submit" class="btn btn-sm btn-danger">Hapus</button> </form></td> : Menambahkan form HTML dengan metode POST dan action /sneakers/{sneaker} untuk proses penghapusan. Method @method('DELETE') digunakan untuk mensimulasikan request HTTP DELETE.

Menjalankan Aplikasi

Jalankan server Laravel kamu dan akses URL /sneakers. Kamu akan melihat daftar sepatu sneaker dengan tombol "Edit" dan "Hapus" di setiap item. Klik tombol "Hapus" untuk menghapus sepatu sneaker dari database.

Catatan:


Yes! Kita sudah menyelesaikan tutorial CRUD (Create, Read, Update, Delete) dengan Laravel!,

Sekarang kamu bisa membuat aplikasi untuk mengelola data dengan mudah, seperti:

  • Koleksi sepatu sneaker: Buat, lihat, edit, dan hapus sepatu sneaker kesayanganmu.
  • Daftar tugas: Atur tugasmu dengan rapi, beri tanda selesai, dan hapus yang sudah beres.
  • Katalog buku: Kelola koleksi bukumu, tambahkan informasi detail, dan bagikan dengan teman.

Ingin berdiskusi lebih lanjut tentang topik ini? Bergabunglah dengan grup Telegram Komunitas #Programmer Full Stack, klik link dibawah ini, dan jangan lupa support blog ini dengan klik tombol Trakteer yang berwarna merah dibawah ya, terima kasih