EJE CENTRAL: Arquitectura Unificada con Organización de Snippets Para implementar las "carpetas", necesitamos un nuevo concepto clave: una tabla para las categorías (categories) y una relación con la tabla de snippets (snippets). Relación Arquitectónica (Nivel Doctorado): • Entidad Nueva: Category (Tu Carpeta). • Relación: Uno a Muchos. Una Category puede tener muchos Snippets, pero cada Snippet pertenece a una única Category. • Implementación: Añadiremos la llave foránea category_id a la tabla snippets. -------------------------------------------------------------------------------- PASO A PASO: PROYECTO UNIFICADO CON CARPETAS Y TARJETAS FASE 1: Configuración Base, Base de Datos y Autenticación 1.1. Creación del Proyecto Único Creamos nuestro proyecto principal. # 1. Crear el proyecto Laravel (única vez) composer create-project laravel/laravel snippet-org-master cd snippet-org-master 1.2. Configuración de PostgreSQL Adaptamos el archivo .env para la conexión con PostgreSQL, siguiendo la adaptación necesaria para el entorno. # Archivo .env DB_CONNECTION=pgsql DB_HOST=127.0.0.1 DB_PORT=5432 DB_DATABASE=snippets_db_organizado DB_USERNAME=tu_usuario_pgsql DB_PASSWORD=tu_clave_pgsql 1.3. Vistas y Autenticación (Login / Registro con Formularios) Instalamos Laravel UI para obtener las vistas de scaffolding (login y registro) y preparar el proyecto para formularios HTML. # 1. Instalar el paquete de interfaz composer require laravel/ui # 2. Generar vistas de autenticación (Login/Registro) y layouts php artisan ui bootstrap --auth # 3. Compilar los assets para estilos npm install npm run dev Al hacer esto, las rutas de login y register ya están en routes/web.php y usan el sistema de sesiones, crucial para la parte de formularios. 1.4. Modelos y Migraciones (¡La Nueva Estructura!) Necesitamos dos modelos y dos migraciones: Category y Snippet. A. Modelo y Migración de Category (La Carpeta) php artisan make:model Category -m Definición de la Migración categories: // database/migrations/..._create_categories_table.php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; return new class extends Migration { public function up(): void { Schema::create('categories', function (Blueprint $table) { $table->id(); // NAME: Nombre de la carpeta (ej: 'Scripts Python', 'Queries SQL') $table->string('name', 100)->unique(); $table->string('description')->nullable(); // Opcional $table->timestamps(); }); } // ... }; B. Modelo y Migración de Snippet (Con Llave Foránea) Creamos el modelo Snippet e inmediatamente modificamos la migración para añadir la llave foránea category_id. php artisan make:model Snippet -m Definición de la Migración snippets: // database/migrations/..._create_snippets_table.php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; return new class extends Migration { public function up(): void { Schema::create('snippets', function (Blueprint $table) { $table->id(); // Llave Foránea: Conexión con la tabla 'categories' $table->foreignId('category_id') ->constrained() // Crea la restricción automática ->onDelete('cascade'); // Si borras la carpeta, se borran los snippets. $table->string('title', 255); $table->text('code'); $table->string('language', 50); $table->timestamps(); }); } // ... }; C. Ejecución de la Migración # Ejecutamos las dos migraciones en PostgreSQL php artisan migrate 1.5. Configuración de Relaciones en los Modelos En los modelos, definimos las relaciones para que Laravel sepa cómo están conectadas las "carpetas" y los "snippets" (Nivel Doctorado - Eloquent ORM). // app/Models/Category.php // ... use Illuminate\Database\Eloquent\Relations\HasMany; class Category extends Model { protected $fillable = ['name', 'description']; // Una categoría tiene muchos snippets (1:N) public function snippets(): HasMany { return $this->hasMany(Snippet::class); } } // app/Models/Snippet.php // ... use Illuminate\Database\Eloquent\Relations\BelongsTo; class Snippet extends Model { protected $fillable = ['title', 'code', 'language', 'category_id']; // Un snippet pertenece a una categoría (N:1) public function category(): BelongsTo { return $this->belongsTo(Category::class); } } -------------------------------------------------------------------------------- FASE 2: Implementación de la API REST (JSON) La API debe ser capaz de aceptar y validar el nuevo campo category_id. 2.1 Creación del Controlador API php artisan make:controller Api/SnippetApiController --resource 2.2 Lógica API () En la lógica store y update, la validación es clave: debemos asegurar que el category_id sea requerido y que realmente exista en la tabla categories. // app/Http/Controllers/Api/SnippetApiController.php // ... (Imports: Request, Validator, Snippet, Category) ... public function store(Request $request) { $rules = [ 'title' => 'required|string|max:255', 'code' => 'required|string', 'language' => 'required|string|max:50', // ¡Validación Mejorada para la carpeta! 'category_id' => 'required|exists:categories,id|integer', // 'exists:categories,id' asegura que el ID de la categoría exista en la tabla 'categories'. ]; $validator = Validator::make($request->all(), $rules); if ($validator->fails()) { return response()->json(['status' => 400, 'errors' => $validator->errors()], 400); } $snippet = Snippet::create($request->all()); return response()->json(['status' => 201, 'message' => 'Creado', 'data' => $snippet], 201); } public function index() { // Cargar la relación para obtener el nombre de la carpeta en la respuesta JSON $snippets = Snippet::with('category')->get(); // Ahora el JSON incluirá el nombre de la categoría del snippet. return response()->json(['status' => 200, 'data' => $snippets], 200); } // ... (Otros métodos CRUD devolviendo JSON) ... 2.3 Rutas de la API // routes/api.php use App\Http\Controllers\Api\SnippetApiController; // (Opcional: Agregar middleware de autenticación con token si se usa Sanctum, como se mencionó) Route::resource('snippets', SnippetApiController::class) ->only(['index', 'store', 'show', 'update', 'destroy']); -------------------------------------------------------------------------------- FASE 3: Implementación WEB (Formularios y Vistas en Tarjetas) Usaremos el generador CRUD para las categorías y luego para los snippets, para obtener rápidamente los formularios. 3.1 Instalación del Generador CRUD composer require ibex/crud-generator --dev php artisan vendor:publish --tag=crud 3.2 Generación del CRUD de CATEGORIES (Las Carpetas) Necesitas un CRUD para crear, editar y eliminar las carpetas/categorías. # Creamos el CRUD para las carpetas php artisan make:crud categories Esto genera las vistas y el controlador CategoryController.php para gestionar tus carpetas. 3.3 Generación del CRUD de SNIPPETS # Creamos el CRUD para los snippets php artisan make:crud snippets Nota Importante: El generador crea el controlador web (SnippetController) y las vistas, pero deberás modificar manualmente el formulario de creación (create.blade.php) y edición (edit.blade.php) para incluir un campo de selección (<select>) que liste las categorías disponibles. 3.4 Rutas Web (Protegidas) Añadimos las rutas de los dos recursos en routes/web.php y las protegemos con el middleware auth. // routes/web.php use Illuminate\Support\Facades\Route; use App\Http\Controllers\SnippetController; use App\Http\Controllers\CategoryController; Auth::routes(); Route::get('/', [App\Http\Controllers\HomeController::class, 'index'])->name('home'); Route::middleware('auth')->group(function () { // 1. CRUD de Carpetas/Categorías Route::resource('categories', CategoryController::class); // 2. CRUD de Snippets Route::resource('snippets', SnippetController::class); }); 3.5 Mejora de Vistas: Visualización en Tarjetas El generador CRUD generó una tabla simple. Para mostrar el código como tarjetas bonitas, debes editar la vista principal: resources/views/snippets/index.blade.php. Objetivo (Nivel Avanzado): Remplazar el HTML de tabla por un loop que use la estructura de tarjeta (asumiendo que Bootstrap está instalado por el paso 1.3). Ejemplo Esquemático de Modificación de Vistas: {{-- resources/views/snippets/index.blade.php --}} @extends('layouts.app') @section('content') <div class="container"> <h1>Mis Snippets Organizados</h1> <a href="{{ route('snippets.create') }}" class="btn btn-primary mb-3">Crear Nuevo Snippet</a> <div class="row"> {{-- Iteramos sobre la lista de snippets --}} @foreach ($snippets as $snippet) <div class="col-md-4 mb-4"> {{-- Estructura de Tarjeta (Card) --}} <div class="card shadow"> <div class="card-header bg-primary text-white"> {{ $snippet->title }} <span class="badge bg-secondary float-end">{{ $snippet->language }}</span> </div> <div class="card-body"> {{-- Mostramos el nombre de la carpeta/categoría --}} <p class="card-text text-muted small"> Carpeta: <strong>{{ $snippet->category->name }}</strong> </p> {{-- Vista previa del código (limitada) --}} <pre class="bg-light p-2 rounded small overflow-auto" style="max-height: 100px;"> <code>{{ Str::limit($snippet->code, 150) }}</code> </pre> <a href="{{ route('snippets.show', $snippet->id) }}" class="btn btn-sm btn-info">Ver Detalle</a> <a href="{{ route('snippets.edit', $snippet->id) }}" class="btn btn-sm btn-warning">Editar</a> {{-- Formulario para eliminar (como se muestra en el ejemplo CRUD) --}} <form action="{{ route('snippets.destroy', $snippet->id) }}" method="POST" class="d-inline"> @csrf @method('DELETE') <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('¿Seguro?')">Eliminar</button> </form> </div> </div> </div> @endforeach </div> </div> @endsection Al incorporar estas modificaciones, tu proyecto unificado estará completo: los datos se guardan en PostgreSQL con una estructura de organización (categorías), la API sirve JSON con la relación cargada, y la interfaz web presenta la información de manera visualmente atractiva mediante tarjetas.
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter