Tutorial Laravel dan React Js #3 Model, Migrasi dan Controller

Belajar Laravel dan React.js untuk membangun aplikasi web full-stack yang powerful dan scalable. Laravel sebagai backend menyediakan API yang efisien, sementara React.js sebagai frontend memberikan pengalaman interaktif dan dinamis bersama lagikoding.com

✅ Telah dilihat 518 kali

Rating: 5.00 ⭐

... 12 March 2025, 15:52

Model, Migrasi dan Controller


Pada materi kali ini, kita akan membuat model migrasi dan juga controller menggunakan sebuah command saja. Silakan jalankan perintah berikut kedalam CMD/Terminal dan tentunya berada didalam direktori project laravel-todo:

php artisan make:model Task -mcr

Perintah diatas akan menghasilkan 3 file yakni:

   INFO  Model [C:\Users\LENOVO\Pictures\REACTJS\laravel-todo\app\Models\Task.php] created successfully.

   INFO  Migration [C:\Users\LENOVO\Pictures\REACTJS\laravel-todo\database\migrations/2025_02_18_054042_create_tasks_table.php] created successfully.

   INFO  Controller [C:\Users\LENOVO\Pictures\REACTJS\laravel-todo\app\Http\Controllers\TaskController.php] created successfully.

Migrasi


Silakan buka file migrasi yang baru saja dibuat C:\Users\LENOVO\Pictures\REACTJS\laravel-todo\database\migrations/2025_02_18_054042_create_tasks_table.php kemudian pada function up, ubah menjadi seperti berikut ini:

public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->boolean('completed')->default(false);
            $table->string('category');
            $table->timestamps();
        });
    }

Dalam function up diatas, kita akan membuat table dengan nama tasks, kemudian didalam table tersebut terdapat column title, completed dan juga category. Silakan jalankan migrasi dengan cara menjalankan perintah:

php artisan migrate

Maka teman-teman bisa lihat didalam phpmyadmin, pada database laravel_todo akan muncul table dengan nama tasks.

Model


Silakan buka file model yang sebelumnya kita buat yakni INFO Model [C:\Users\LENOVO\Pictures\REACTJS\laravel-todo\app\Models\Task.php]. Kemudian ubah menjadi seperti berikut ini:

<?php

namespace App\Models;

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

class Task extends Model
{
    use HasFactory;

    protected $fillable = ['title', 'completed' ,'category'];

    protected $casts = [
        'completed' => 'boolean',
    ];
}

Menggunakan HasFactory → Memungkinkan penggunaan factory untuk membuat data uji.

$fillable → Menentukan kolom yang bisa diisi secara massal (titlecompletedcategory).

$casts → Mengonversi kolom completed menjadi tipe boolean agar otomatis dikembalikan sebagai true atau false.

Controller


Silakan buka controller yang sudah dibuat INFO Controller [C:\Users\LENOVO\Pictures\REACTJS\laravel-todo\app\Http\Controllers\TaskController.php]. Kemudian ubah secara keseluruhan menjadi seperti berikut ini:

<?php

namespace App\Http\Controllers;

use App\Models\Task;
use Illuminate\Http\Request;
use Illuminate\Http\JsonResponse;

class TaskController extends Controller
{
    public function index(): JsonResponse
    {
        $tasks = Task::orderBy('created_at', 'desc')->paginate(9);
    
        return response()->json([
            'status' => 'success',
            'message' => 'Tasks retrieved successfully',
            'data' => $tasks
        ], 200);
    }

    public function store(Request $request): JsonResponse
    {
        $validated = $request->validate([
            'title' => 'required|string|max:255',
            'category' => 'required|string|max:255',
        ]);

        $task = Task::create([
            'title' => $validated['title'],
            'category' => $validated['category'],
        ]);

        return response()->json([
            'status' => 'success',
            'message' => 'Task created successfully',
            'data' => $task
        ], 201);
    }

    public function update(Request $request, $id): JsonResponse
    {
        $validated = $request->validate([
            'title' => 'sometimes|string|max:255',
            'completed' => 'required|boolean',
            'category' => 'sometimes|string|max:255',
        ]);

        $task = Task::findOrFail($id);
        $task->update($validated);

        return response()->json([
            'status' => 'success',
            'message' => 'Task updated successfully',
            'data' => $task
        ]);
    }

    public function destroy($id): JsonResponse
    {
        $task = Task::findOrFail($id);
        $task->delete();

        return response()->json([
            'status' => 'success',
            'message' => 'Task deleted successfully'
        ], 200);
    }
}

index()
Mengambil semua tugas (tasks), mengurutkan berdasarkan created_at secara menurun, dan menampilkan 9 tugas per halaman dalam format JSON.
store(Request $request)
Menerima data tugas baru dari request, memvalidasi input (title dan category wajib diisi), menyimpannya ke database, lalu mengembalikan respons JSON berisi tugas yang baru dibuat.
update(Request $request, $id)
Memperbarui tugas berdasarkan id, memvalidasi input (title opsional, completed wajib boolean, category opsional), lalu menyimpan perubahan ke database dan mengembalikan respons JSON.
destroy($id)
Menghapus tugas berdasarkan id, lalu mengembalikan respons JSON yang menandakan tugas berhasil dihapus.

Sampai pada materi kali ini, kita telah berhasil membuat Model, Migrasi dan juga Controller untuk kebutuhan aplikasi kita. Pada materi berikutnya, kita akan melakukan konfigurasi rute, agar API bisa diakses dan dikonsumsi oleh client.

Daftar eBook