5-CRUD de Tareas en Laravel (Sencillo y Práctico)

  CRUD de Tareas en Laravel (Sencillo y Práctico)

Voy a guiarte paso a paso para crear un CRUD básico de tareas en Laravel con solo un campo "nombre".

1. Configuración inicial

Primero, crea un nuevo proyecto Laravel si no lo has hecho:

bash

composer create-project laravel/laravel task-crud
cd task-crud

2. Base de datos

Crea una base de datos y configura el archivo .env:

env

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

3. Crear migración y modelo

bash

php artisan make:model Task -m

Edita la migración (database/migrations/xxxx_create_tasks_table.php):

php artisan make:model Task -m

public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->timestamps();
    });
}

Ejecuta la migración: php artisan migrate

bash

php artisan migrate

4. Modelo Task

Edita app/Models/Task.php:

app/Models/Task.php

<?php

namespace App\Models;

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

class Task extends Model
{
    use HasFactory;

    protected $fillable = ['name'];
}

5. Controlador

Crea el controlador:

bash

php artisan make:controller TaskController --resource

Edita app/Http/Controllers/TaskController.php:

php artisan make:controller nombre-controlador- 

<?php

namespace App\Http\Controllers;

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

class TaskController extends Controller
{
    public function index()
    {
        $tasks = Task::latest()->get();
        return view('tasks.index', compact('tasks'));
    }

    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required|max:255',
        ]);

        Task::create($request->all());

        return redirect()->route('tasks.index')
            ->with('success', 'Tarea creada correctamente');
    }

    public function update(Request $request, Task $task)
    {
        $request->validate([
            'name' => 'required|max:255',
        ]);

        $task->update($request->all());

        return redirect()->route('tasks.index')
            ->with('success', 'Tarea actualizada correctamente');
    }

    public function destroy(Task $task)
    {
        $task->delete();

        return redirect()->route('tasks.index')
            ->with('success', 'Tarea eliminada correctamente');
    }
}

6. Vistas

Crea la carpeta resources/views/tasks y los siguientes archivos:

resources/views/tasks/index.blade.php:

php

@extends('layouts.app')

@section('content')
<div class="container">
    <h1>Lista de Tareas</h1>
    
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <div class="row mb-3">
        <div class="col-md-6">
            <form action="{{ route('tasks.store') }}" method="POST">
                @csrf
                <div class="input-group">
                    <input type="text" name="name" class="form-control" placeholder="Nueva tarea" required>
                    <button type="submit" class="btn btn-primary">Agregar</button>
                </div>
            </form>
        </div>
    </div>

    <ul class="list-group">
        @foreach($tasks as $task)
        <li class="list-group-item d-flex justify-content-between align-items-center">
            <form action="{{ route('tasks.update', $task->id) }}" method="POST" class="d-flex w-100">
                @csrf
                @method('PUT')
                <input type="text" name="name" value="{{ $task->name }}" class="form-control me-2">
                <button type="submit" class="btn btn-sm btn-success">Actualizar</button>
            </form>
            <form action="{{ route('tasks.destroy', $task->id) }}" method="POST">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-sm btn-danger">Eliminar</button>
            </form>
        </li>
        @endforeach
    </ul>
</div>
@endsection

7. Rutas

Edita routes/web.php:

php

<?php

use App\Http\Controllers\TaskController;
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return redirect()->route('tasks.index');
});

Route::resource('tasks', TaskController::class);

8. Layout (opcional)

Si no tienes el layout básico, crea resources/views/layouts/app.blade.php:

php

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRUD de Tareas</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container py-4">
        @yield('content')
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

9. Ejecutar la aplicación

bash

php artisan serve

Ahora puedes acceder a http://localhost:8000 y verás un CRUD funcional de tareas con solo un campo de nombre.

Características:

• Crear tareas (solo nombre)

• Listar todas las tareas

• Editar tareas (inline)

• Eliminar tareas

• Validación básica

• Mensajes de confirmación

• Diseño simple con Bootstrap

¡Listo! Tienes un CRUD completo y funcional con solo lo esencial.