Come creare una To-Do List in Laravel con Nes.Css


Pubblicato il (11 mesi fa)

Tempo di Lettura Stimata: 2 minuti

Capitoli Totali: 10

Immagine di anteprima dell'articolo Come creare una To-Do List in Laravel con Nes.Css

In questo approfondimento imparerai come creare una To-Do List utilizzando:

Vedrai come utilizzare Laravel per creare una To-Do List funzionale e ben progettata.

Crea il progetto Laravel

Per prima cosa, crea un nuovo progetto Laravel utilizzando la guida subito qui riportata:

Guida su come installare Laravel su Windows e Mac

Per comodità, supponiamo tu abbia scelto l’installazione via Laravel Installer (Metodo Raccomandato se sei alle prime armi!).

Lancia i comandi nel terminale:

laravel new todolist
cd todolist
php artisan serve

Comparirà nel terminale l’indirizzo relativo per accedere al progetto.

Digitando l’url presente nel terminale, potrai accedere alla starter page di Laravel: http://127.0.0.1:8000

Configura il file di ambiente .env

Per fini accademici utilizzeremo SQLITE, molto più leggero di MySQL e di facile inizializzazione.

Apri il file .env del progetto e modifica le impostazioni di connessione al DB cancellando tutte le altre configurazione DB_ come segue:

DB_CONNECTION=sqlite

Infine lancia il comando per creare fisicamente il DB:

php artisan migrate

Crea le tabelle con le Migration

Per creare le tabelle, lancia il comando:

php artisan make:migration create_tasks_table

Verrà generata la migrations in: database/migrations Aprendo il file appena generato, aggiungi la stringa relativa alla description, in questo modo:

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

Ancora, lancia il comando per creare fisicamente la tabella nel DB:

php artisan migrate

Definisci i Model

Hai creato fisicamente le tabella, ma Laravel non sa ancora come interagirci, necessita di un collegamento logico.

Lancia il comando:

php artisan make:model Task

Verrà creato un nuovo file in: app/Models/Task.php

ATTENZIONE!

Per utilizzare l’aggiornamento massivo, dovrai abilitare manualmente i campi in questo modo:

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
 
class Task extends Model
{
protected $fillable = [
'description'
];
}

Definiamo le rotte dell’applicazione

Come ogni buon navigatore che si rispetti, prima di partire è necessario progettare tutte le strade e rotte da percorrere nell’avventura.

Avremo bisogno di:

  • Una rotta con un form di inserimento Task e tutti i Task già inseriti (INDEX);
  • Una rotta a cui mandare i dati in post, validarli e scriverli nel database(STORE);
  • Una rotta a cui mandare l’identificativo della risorsa e cancellarlo (DESTROY).

Apri quindi il file routes/web.php e sostituisci il contenuto con queste tre righe:

<?php
 
use Illuminate\Support\Facades\Route;
 
Route::get('/', [TasksController::class, 'index'])->name('tasks.index');
Route::post('/tasks', [TasksController::class, 'store'])->name('tasks.store');
Route::delete('/tasks/{id}', [TasksController::class, 'destroy'])->name('tasks.destroy');

Occupiamoci della logica con i Controller

Da terminale lancia il comando:

php artisan make:controller TaskController

Verrà creato un nuovo file e posizionato in: app/Http/Controllers/TaskController.php

Le operazioni (quindi le funzioni) che andrai a sviluppare sono:

  • index(): La funzione per visualizzare la schermata principale;
  • store(): La funzione che verrà richiamata ogni qualvolta si dovrà memorizzare un dato;
  • destroy(): La funzione che verrà richiamata ogni qualvolta si dovrà cancellare un dato;

Metodo index

Avremo bisogno di un metodo indice in cui richiamare tutti i Task inseriti nel Database e visualizzarli in una view di elenco.

Copia e incolla il codice qui sotto nel tuo controller, assicurandoti di sovrascrivere tutto il contenuto precedente:

<?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', compact('tasks'));
}
}

Metodo store

La visualizzazione è fatta, non ci resta che implementare la memorizzazione dei Task.

Importeremo la classe Request per gestire i dati che passeranno in POST e andremo a definire una piccolissima regola di validazione per gestire correttamente le attività:

<?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', compact('tasks'));
}
 
public function store(Request $request)
{
Task::create($request->validate(
[
'description' => ['required', 'string', 'max:255']
]
));
return to_route('tasks.index');
}
}

Metodo destroy

E come ultima operazione non ci resta che inserire la cancellazione dell’attività una volta completata.

<?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', compact('tasks'));
}
 
public function store(Request $request)
{
Task::create($request->validate(
[
'description' => ['required', 'string', 'max:255']
]
));
return to_route('tasks.index');
}
 
public function destroy($id)
{
$task = Task::findOrFail($id);
$task->delete();
return to_route('tasks.index');
}
}

Interfaccia grafica con Nes.css

Adesso proviamo ad utilizzare la libreria Nes.css. Cerca e rinomina la view che puoi trovare in:

resources/views/welcome.blade.php

In una più consona:

resources/views/tasks.blade.php

L’obiettivo sarà quello di utilizzare le classi css già esistenti e creare due situazioni:

Nessun task inserito: empty.png


Ci sono dei task inseriti:

pieno.png

Per pigrizia ho inserito tutto in un unico file blade, puoi utilizzare questa view:

 
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>To Do List</title>
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
 
<style>
@font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
src: local('Press Start 2P Regular'), local('PressStart2P-Regular'), url('https://fonts.gstatic.com/s/pressstart2p/v8/e3t4euO8T-267oIAQAu6jDQyK3nVivNm4I81.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 
 
body {
width: 100%;
min-height: 100vh;
font-family: 'Press Start 2P', cursive;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
 
.my-3 {
margin-bottom: 3rem;
margin-top: 3rem;
}
 
.container {
max-width: 720px;
margin: 0 auto;
padding-left: 1rem;
padding-right: 1rem;
}
 
.w-full {
width: 100%;
}
</style>
</head>
 
<body class="container">
<div class="nes-container with-title is-centered w-full">
<p>Devo ricordarmi di...</p>
<form method="POST" class="nes-field is-inline" action="{{ route('tasks.store')}}">
@csrf
<input type="text" id="description" name="description"
class="@error('description') is-error @enderror nes-input">
<button type="submit" class="nes-btn is-primary">+</button>
</form>
@error('description')
<span class="nes-text is-error">
<span>{{ $message }}</span>
</span>
@enderror
</div>
 
@forelse($tasks as $task)
 
<div class="nes-container with-title is-centered my-3 w-full">
<p class="title">Attività {{$loop->remaining + 1}}</p>
<form action="{{ route('tasks.destroy',$task->id) }}" method="POST">
<div class="is-inline flex justify-between items-center max-w-md">
<p class="pr-4">{{$task->description}}</p>
@csrf
@method('DELETE')
<button type="submit" class="nes-btn is-success ml-1 h-12">Fatto
</button>
</div>
</form>
</div>
@empty
<div class="nes-container is-centered my-3 w-full">
<p>Ti stai annoiando? Inserisci qualche Tasks!</p>
<i class="nes-icon coin is-medium"></i>
<i class="nes-icon coin is-medium"></i>
<i class="nes-icon coin is-medium"></i>
<i class="nes-icon coin is-medium"></i>
<i class="nes-icon coin is-medium"></i>
</div>
@endforelse
</body>
 
</html>

Link alla repository

Francesco Mansi

Chi è l'autore

Da quando le nonnine al supermercato hanno smesso di chiamarmi giovanotto posso finalmente fingermi un adulto con esperienza.
Lavoro con Laravel dalla versione 5.5 e con PHP da più di 10 anni. Non sono un guru ma adoro schematizzare e mettere per iscritto tutto quello che studio, quindi quello che troverai qui sono solamente appunti che spero possano servirti.

Francesco Mansi


Articoli Correlati
Immagine in Evidenza per l'articolo Guida su come installare Laravel su Windows e Mac
Laravel

Guida su come installare Laravel su Windows e Mac

In questo articolo, ti illustrerò tre metodi per installare Laravel sia su Mac che su Windows

Immagine in Evidenza per l'articolo Cos’è Laravel e come funziona
Laravel

Cos’è Laravel e come funziona

I prerequisiti obbligatori per una comprensione ottimale della logica del framework php più popolare del momento.