Tutorial Membuat CRUD dengan Laravel 9: Langkah Demi Langkah Mudah

Laravel 9 adalah framework PHP yang populer untuk membangun aplikasi web modern. Kekuatannya terletak pada kemudahan penggunaan, sintaks yang elegan, dan fitur-fitur canggih yang membantu pengembang membangun aplikasi dengan cepat dan efisien. Salah satu fondasi penting dalam pengembangan aplikasi web adalah CRUD (Create, Read, Update, Delete), yaitu operasi dasar untuk mengelola data. Dalam tutorial ini, kita akan membahas secara rinci tutorial membuat CRUD dengan Laravel 9 langkah demi langkah, sehingga Anda bisa dengan mudah menerapkan CRUD pada proyek Laravel 9 Anda. Kita akan mulai dari persiapan lingkungan, instalasi, hingga implementasi setiap operasi CRUD. Yuk, simak selengkapnya!

1. Persiapan Lingkungan Pengembangan Laravel 9: Fondasi Penting

Sebelum memulai tutorial membuat CRUD dengan Laravel 9, pastikan Anda telah menyiapkan lingkungan pengembangan yang sesuai. Hal ini meliputi instalasi PHP, Composer, dan database.

  • PHP: Laravel 9 membutuhkan PHP versi 8.0 ke atas. Pastikan versi PHP Anda sudah sesuai. Anda bisa mengecek versi PHP dengan menjalankan perintah php -v di terminal. Jika belum, unduh dan instal PHP dari situs resminya (php.net).

  • Composer: Composer adalah dependency manager untuk PHP. Composer digunakan untuk mengunduh dan mengelola library dan package yang dibutuhkan oleh Laravel. Unduh dan instal Composer dari situs resminya (getcomposer.org).

  • Database: Laravel mendukung berbagai macam database, seperti MySQL, PostgreSQL, SQLite, dan SQL Server. Pilih salah satu database yang Anda kuasai. Dalam tutorial ini, kita akan menggunakan MySQL. Pastikan MySQL sudah terinstal dan berjalan di komputer Anda. Anda juga perlu membuat sebuah database baru untuk proyek Laravel Anda.

  • Node.js dan NPM (Opsional): Meskipun tidak wajib untuk CRUD dasar, Node.js dan NPM (Node Package Manager) diperlukan jika Anda ingin menggunakan Laravel Mix untuk mengelola aset CSS dan JavaScript. Instal Node.js dari situs resminya (nodejs.org). NPM akan otomatis terinstal bersama dengan Node.js.

2. Instalasi Laravel 9: Memulai Proyek Baru

Setelah lingkungan pengembangan siap, langkah selanjutnya dalam tutorial membuat CRUD dengan Laravel 9 adalah instalasi Laravel. Buka terminal atau command prompt, lalu navigasikan ke direktori tempat Anda ingin menyimpan proyek Laravel Anda. Kemudian, jalankan perintah berikut untuk membuat proyek Laravel baru:

composer create-project laravel/laravel:^9.0 nama-proyek

Ganti nama-proyek dengan nama proyek yang Anda inginkan. Composer akan mengunduh dan menginstal semua dependency yang dibutuhkan oleh Laravel. Proses ini mungkin membutuhkan beberapa menit, tergantung kecepatan koneksi internet Anda.

Setelah instalasi selesai, navigasikan ke direktori proyek Laravel Anda:

cd nama-proyek

3. Konfigurasi Database Laravel 9: Menghubungkan Aplikasi ke Database

Langkah penting berikutnya dalam tutorial membuat CRUD dengan Laravel 9 adalah mengkonfigurasi koneksi database. Buka file .env yang terletak di direktori proyek Anda. Cari bagian yang berisi pengaturan database (mulai dari DB_CONNECTION=). Ubah nilai-nilai tersebut sesuai dengan konfigurasi database Anda. Contohnya:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nama_database
DB_USERNAME=nama_pengguna
DB_PASSWORD=kata_sandi

Ganti nama_database, nama_pengguna, dan kata_sandi dengan informasi yang sesuai dengan konfigurasi database Anda. Pastikan database yang Anda tentukan (nama_database) sudah dibuat di MySQL.

Setelah mengkonfigurasi database, jalankan perintah berikut untuk membuat migration dan seeder default Laravel:

php artisan migrate

Jika Anda belum pernah menjalankan perintah php artisan migrate sebelumnya, Anda mungkin perlu menjalankan perintah php artisan key:generate terlebih dahulu untuk menghasilkan application key yang unik.

4. Membuat Model dan Migration: Struktur Data Aplikasi

Dalam tutorial membuat CRUD dengan Laravel 9 ini, kita akan membuat contoh CRUD untuk data “Artikel”. Oleh karena itu, kita perlu membuat model dan migration untuk tabel “articles”. Jalankan perintah berikut untuk membuat model dan migration secara bersamaan:

php artisan make:model Article -m

Perintah ini akan membuat dua file baru: app/Models/Article.php (model) dan database/migrations/YYYY_MM_DD_HHMMSS_create_articles_table.php (migration).

Buka file migration ( database/migrations/YYYY_MM_DD_HHMMSS_create_articles_table.php). Di dalam method up(), tambahkan field yang ingin Anda simpan di tabel “articles”. Contohnya:

<?php

use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('articles', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('content');
            $table->timestamps();
        });
    }

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

Di sini, kita membuat tiga field: title (string), content (text), dan timestamps() (otomatis membuat field created_at dan updated_at).

Setelah selesai mengubah migration, jalankan perintah berikut untuk membuat tabel “articles” di database Anda:

php artisan migrate

5. Membuat Controller: Logika Aplikasi CRUD

Selanjutnya dalam tutorial membuat CRUD dengan Laravel 9 adalah membuat controller untuk menangani logika CRUD. Jalankan perintah berikut untuk membuat controller bernama ArticleController:

php artisan make:controller ArticleController --resource

Perintah --resource akan membuat controller dengan method resource (index, create, store, show, edit, update, destroy) yang umum digunakan untuk CRUD.

Buka file app/Http/Controllers/ArticleController.php. Anda akan melihat controller dengan beberapa method yang sudah di-generate. Sekarang kita akan mengimplementasikan logika untuk setiap method.

  • index() (Menampilkan Daftar Artikel):

    public function index()
    {
        $articles = Article::all();
        return view('articles.index', compact('articles'));
    }

    Method ini mengambil semua data artikel dari database dan mengirimkannya ke view articles.index.

  • create() (Menampilkan Form Tambah Artikel):

    public function create()
    {
        return view('articles.create');
    }

    Method ini menampilkan view articles.create yang berisi form untuk menambahkan artikel baru.

  • store() (Menyimpan Artikel Baru):

    public function store(Request $request)
    {
        $request->validate([
            'title' => 'required',
            'content' => 'required',
        ]);
    
        Article::create($request->all());
    
        return redirect()->route('articles.index')
                         ->with('success','Artikel berhasil ditambahkan.');
    }

    Method ini menerima data dari form, memvalidasi data, lalu menyimpan data artikel baru ke database. Setelah berhasil, method ini akan melakukan redirect ke halaman index dan menampilkan pesan sukses.

  • show($id) (Menampilkan Detail Artikel):

    public function show($id)
    {
        $article = Article::find($id);
        return view('articles.show',compact('article'));
    }

    Method ini mengambil data artikel berdasarkan ID dan mengirimkannya ke view articles.show.

  • edit($id) (Menampilkan Form Edit Artikel):

    public function edit($id)
    {
        $article = Article::find($id);
        return view('articles.edit',compact('article'));
    }

    Method ini mengambil data artikel berdasarkan ID dan mengirimkannya ke view articles.edit yang berisi form untuk mengedit artikel.

  • update(Request $request, $id) (Mengupdate Artikel):

    public function update(Request $request, $id)
    {
        $request->validate([
            'title' => 'required',
            'content' => 'required',
        ]);
    
        $article = Article::find($id);
        $article->update($request->all());
    
        return redirect()->route('articles.index')
                         ->with('success','Artikel berhasil diupdate');
    }

    Method ini menerima data dari form, memvalidasi data, lalu mengupdate data artikel berdasarkan ID. Setelah berhasil, method ini akan melakukan redirect ke halaman index dan menampilkan pesan sukses.

  • destroy($id) (Menghapus Artikel):

    public function destroy($id)
    {
        $article = Article::find($id);
        $article->delete();
    
        return redirect()->route('articles.index')
                         ->with('success','Artikel berhasil dihapus');
    }

    Method ini menghapus data artikel berdasarkan ID. Setelah berhasil, method ini akan melakukan redirect ke halaman index dan menampilkan pesan sukses.

6. Membuat View (Tampilan): Antarmuka Pengguna CRUD

Langkah selanjutnya dalam tutorial membuat CRUD dengan Laravel 9 adalah membuat view untuk menampilkan data dan form. Buat direktori resources/views/articles. Di dalam direktori ini, buat file-file berikut:

  • index.blade.php (Daftar Artikel):

    <!DOCTYPE html>
    <html>
    <head>
        <title>Daftar Artikel</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12 margin-tb">
                <div class="pull-left">
                    <h2>Daftar Artikel</h2>
                </div>
                <div class="pull-right">
                    <a class="btn btn-success" href="{{ route('articles.create') }}"> Tambah Artikel Baru</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>Judul</th>
                <th width="280px">Aksi</th>
            </tr>
            @foreach ($articles as $article)
            <tr>
                <td>{{ ++$i }}</td>
                <td>{{ $article->title }}</td>
                <td>
                    <form action="{{ route('articles.destroy',$article->id) }}" method="POST">
                        <a class="btn btn-info" href="{{ route('articles.show',$article->id) }}">Lihat</a>
                        <a class="btn btn-primary" href="{{ route('articles.edit',$article->id) }}">Edit</a>
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Hapus</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </table>
    </div>
    </body>
    </html>

    View ini menampilkan daftar artikel yang diambil dari database. Terdapat juga tombol untuk menambahkan artikel baru, melihat detail artikel, mengedit artikel, dan menghapus artikel.

  • create.blade.php (Form Tambah Artikel):

    <!DOCTYPE html>
    <html>
    <head>
        <title>Tambah Artikel Baru</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12 margin-tb">
                <div class="pull-left">
                    <h2>Tambah Artikel Baru</h2>
                </div>
                <div class="pull-right">
                    <a class="btn btn-primary" href="{{ route('articles.index') }}"> Kembali</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('articles.store') }}" method="POST">
            @csrf
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>Judul:</strong>
                        <input type="text" name="title" class="form-control" placeholder="Judul">
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>Konten:</strong>
                        <textarea class="form-control" style="height:150px" name="content" placeholder="Konten"></textarea>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                        <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </form>
    </div>
    </body>
    </html>

    View ini menampilkan form untuk menambahkan artikel baru.

  • show.blade.php (Detail Artikel):

    <!DOCTYPE html>
    <html>
    <head>
        <title>Detail Artikel</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12 margin-tb">
                <div class="pull-left">
                    <h2>Detail Artikel</h2>
                </div>
                <div class="pull-right">
                    <a class="btn btn-primary" href="{{ route('articles.index') }}"> Kembali</a>
                </div>
            </div>
        </div>
    
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Judul:</strong>
                    {{ $article->title }}
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Konten:</strong>
                    {{ $article->content }}
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>

    View ini menampilkan detail artikel.

  • edit.blade.php (Form Edit Artikel):

    <!DOCTYPE html>
    <html>
    <head>
        <title>Edit Artikel</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12 margin-tb">
                <div class="pull-left">
                    <h2>Edit Artikel</h2>
                </div>
                <div class="pull-right">
                    <a class="btn btn-primary" href="{{ route('articles.index') }}"> Kembali</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('articles.update',$article->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>Judul:</strong>
                        <input type="text" name="title" value="{{ $article->title }}" class="form-control" placeholder="Judul">
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>Konten:</strong>
                        <textarea class="form-control" style="height:150px" name="content" placeholder="Konten">{{ $article->content }}</textarea>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                        <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </div>
        </form>
    </div>
    </body>
    </html>

    View ini menampilkan form untuk mengedit artikel.

7. Konfigurasi Route (Rute): Menghubungkan URL ke Controller

Langkah terakhir dalam tutorial membuat CRUD dengan Laravel 9 adalah mengkonfigurasi route untuk menghubungkan URL ke method di controller. Buka file routes/web.php. Tambahkan route resource untuk ArticleController:

<?php

use IlluminateSupportFacadesRoute;
use AppHttpControllersArticleController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::resource('articles', ArticleController::class);

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

Dengan menambahkan Route::resource('articles', ArticleController::class);, Laravel akan secara otomatis membuat route untuk semua method resource di ArticleController.

8. Menguji Aplikasi CRUD: Memastikan Semuanya Berjalan Lancar

Setelah semua langkah selesai, jalankan server pengembangan Laravel:

php artisan serve

Buka browser Anda dan kunjungi http://localhost:8000/articles. Anda akan melihat halaman daftar artikel. Anda bisa mencoba menambahkan artikel baru, melihat detail artikel, mengedit artikel, dan menghapus artikel. Pastikan semua operasi CRUD berjalan dengan lancar.

9. Validasi Data Lebih Lanjut: Meningkatkan Keamanan dan Kualitas Data

Pada contoh di atas, kita sudah melakukan validasi dasar pada method store() dan update() di ArticleController. Anda bisa meningkatkan validasi data dengan menambahkan aturan validasi yang lebih spesifik, seperti panjang minimum karakter, format data, dan lain-lain. Anda bisa membaca dokumentasi Laravel tentang validasi untuk informasi lebih lanjut (laravel.com/docs/9.x/validation).

10. Otentikasi dan Otorisasi: Membatasi Akses Data

Untuk aplikasi yang lebih kompleks, Anda mungkin perlu menerapkan otentikasi dan otorisasi untuk membatasi akses ke data CRUD. Laravel menyediakan fitur otentikasi yang mudah digunakan. Anda bisa menggunakan package Laravel Breeze atau Laravel Jetstream untuk scaffolding otentikasi. Setelah otentikasi diterapkan, Anda bisa menggunakan middleware untuk membatasi akses ke route tertentu.

11. Menggunakan Eloquent Relationship: Mengelola Relasi Antar Tabel

Jika aplikasi Anda memiliki relasi antar tabel (misalnya, artikel memiliki kategori), Anda bisa menggunakan Eloquent relationship untuk mengelola relasi tersebut. Anda bisa mendefinisikan relasi one-to-one, one-to-many, atau many-to-many di model. Dengan Eloquent relationship, Anda bisa dengan mudah mengambil data yang terkait dengan model tertentu.

12. Tips dan Trik Laravel 9: Meningkatkan Produktivitas

Berikut adalah beberapa tips dan trik untuk meningkatkan produktivitas Anda saat mengembangkan aplikasi Laravel 9:

  • Gunakan Artisan Console: Artisan adalah command-line interface (CLI) Laravel yang menyediakan banyak perintah berguna untuk membantu Anda membangun aplikasi dengan cepat.
  • Pelajari Blade Templating Engine: Blade adalah templating engine yang kuat dan mudah digunakan yang memungkinkan Anda membuat view yang dinamis dan reusable.
  • Manfaatkan Eloquent ORM: Eloquent adalah Object-Relational Mapper (ORM) yang memudahkan Anda berinteraksi dengan database.
  • Gunakan Dependency Injection: Dependency injection adalah teknik desain yang memungkinkan Anda membuat kode yang lebih modular dan mudah diuji.
  • Pelajari Testing: Menulis unit test dan feature test akan membantu Anda memastikan bahwa kode Anda berfungsi dengan benar dan mencegah bug.

Dengan mengikuti tutorial membuat CRUD dengan Laravel 9 ini, Anda seharusnya sudah bisa membuat aplikasi CRUD sederhana menggunakan Laravel 9. Jangan ragu untuk bereksperimen dan mencoba fitur-fitur lain yang ditawarkan oleh Laravel. Selamat mencoba!