Creare una Todo List con Laravel e Vue.js

In questa lezione ci concentreremo sulla costruzione di un'applicazione pratica: una Todo List. Il progetto ci permetterà di approfondire la comprensione di Laravel e Vue.js attraverso l'implementazione di funzionalità essenziali come la gestione delle attività, l'interazione in tempo reale e la persistenza dei dati.

Esploreremo come utilizzare Laravel per gestire il back-end dell'applicazione, includendo la configurazione di rotte RESTful, la gestione delle richieste HTTP e l'interazione con il database per la memorizzazione delle attività. Nel contempo, utilizzeremo Vue.js per creare un'interfaccia utente dinamica e intuitiva, permettendo agli utenti di aggiungere, modificare ed eliminare attività in tempo reale.

Questa lezione è progettata per guidarti attraverso ogni fase della creazione di una Todo List funzionale. Offrendoti competenze pratiche nel campo dello sviluppo web moderno. Continua a seguire il nostro percorso per acquisire una comprensione approfondita di come combinare efficacemente Laravel e Vue.js per la creazione di applicazioni web potenti e intuitive.

Preparazione dell'Ambiente di Sviluppo

Per iniziare a sviluppare l'applicazione Todo List con Laravel e Vue.js, è essenziale preparare l'ambiente di sviluppo. Vediamo cosa serve e come configurarlo per ottenere il risultato desiderato.

Composer: il gestore di dipendenze per PHP

Composer è uno strumento fondamentale per gestire le dipendenze PHP in un progetto Laravel. Per installare Composer, è sufficiente visitare il sito ufficiale e seguire le istruzioni per il sistema operativo utilizzato. Una volta installato, Composer permetterà di installare Laravel e gestire le dipendenze PHP del progetto.

Node.js e npm: gestione delle dipendenze JavaScript

Node.js è necessario per eseguire npm (Node Package Manager) che gestirà le dipendenze JavaScript nel nostro progetto. npm è utilizzato per installare pacchetti come Vue.js e Vite, nonché per eseguire script di build e sviluppo. È consigliabile installare la versione LTS di Node.js dal sito ufficiale per garantire la stabilità e la compatibilità con il nostro ambiente di sviluppo.

Web Server locale e database

Per sviluppare un'applicazione che utilizza un database, come una Todo List, avrai bisogno di un ambiente locale che includa un web server e un database. XAMPP e Laragon sono entrambi ottimi strumenti che combinano Apache, MySQL (o MariaDB) e PHP in un unico pacchetto facile da installare e gestire. XAMPP è ampiamente supportato e offre un'interfaccia utente semplice per avviare e fermare il server e il DBMS.

Ambiente di sviluppo integrato (IDE)

Un ambiente di sviluppo integrato (IDE) è essenziale per scrivere, testare e debuggare il codice. Visual Studio Code (VSC) è una scelta popolare tra gli sviluppatori grazie alle sue potenti funzionalità di editing, all'integrazione con Git e ad un'ampia gamma di estensioni che facilitano lo sviluppo con Laravel e Vue.js. Con VSC, possiamo migliorare la produttività grazie a strumenti di sviluppo avanzati e un ambiente di sviluppo personalizzabile.

Configurazione iniziale

Dopo aver installato Composer e Node.js, possiamo creare un nuovo progetto Laravel utilizzando Composer e configurare le dipendenze JavaScript con npm. Utilizzeremo Vite come strumento per la gestione delle risorse front-end, garantendo un processo di sviluppo veloce e ottimizzato per Vue.js.

Preparare attentamente l'ambiente di sviluppo è fondamentale per avviare con successo il nostro progetto Todo List con Laravel e VueJS. Utilizzando Composer, Node.js, un web server locale e un IDE come Visual Studio Code, saremo pronti per esplorare e sviluppare le funzionalità avanzate di queste potenti tecnologie web.

Installazione di Laravel

Per iniziare, assicurati di avere Composer installato sul tuo sistema:

composer create-project laravel/laravel todoList

Questo comando crea un nuovo progetto Laravel chiamato todoList utilizzando la versione più recente del framework.

Configurazione dell'ambiente locale

Utilizza un ambiente di sviluppo locale come XAMPP o Laragon per gestire Apache, MySQL (o MariaDB) e PHP sul tuo computer. Questi strumenti ti permetteranno di creare e gestire un database locale per memorizzare le attività della Todo List.

Avvio del server di sviluppo

Dopo aver installato Laravel e configurato l'ambiente locale, puoi avviare il server di sviluppo di Laravel con il seguente comando:

php artisan serve

Questo comando avvia un server di sviluppo locale che ti permette di visualizzare e testare l'applicazione in fase di sviluppo all'indirizzo http://localhost:8000 (o un altro URL specificato dal comando). Se navighi su http://127.0.0.1:8000/ noterai un errore:

Vuol dire che Laravel sta tentando di connettersi ad un database SQLite ma non lo trova. Apri il file .env e cambia il tipo di database:

...
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
...

In questo modo stai richiedendo la connessione con un database MySQL o MariaDB.

Preparazione del database

Se hai installato Laragon, come nel mio caso, avvialo e clicca su:

Quindi nel terminale che si apre digita l'istruzione proposta di seguito per creare un database:

E:\PROJECT
λ mysql -u root -p
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 10
Server version: 8.0.30 MySQL Community Server - GPL
Copyright (c) 2000, 2022, Oracle and/or its affiliates.
Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
mysql> CREATE DATABASE todolist_db;
Query OK, 1 row affected (0.01 sec)
mysql>

Di solito non c'è password in locale, per cui quando viene chiesta clicca su invio e basta, per uscire dal terminale digita due volte exit;, riapri il file .env e configura il database appena creato:

...
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=todolist_db
DB_USERNAME=root
DB_PASSWORD=
...

Da terminale crea poi le tabelle nel database grazie ad Artisan:

php artisan migrate

e ricarica la pagina nel browser:

Conclusione

In questa lezione, abbiamo fatto un importante passo avanti nel nostro percorso di apprendimento integrando Laravel e Vue.js per creare una semplice ma efficace applicazione Todo List. Abbiamo iniziato con la configurazione dell'ambiente di sviluppo, installando e configurando Laravel e impostando un server locale per il database.

Inoltre, abbiamo risolto problemi comuni come la connessione al database e preparato il nostro progetto per ulteriori sviluppi. Ora l'ambiente è pronto, con Laravel configurato per utilizzare un database MySQL (o MariaDB) e Vite già incluso per gestire le risorse frontend con Vue.js.

Nella prossima lezione ci concentreremo sulle funzionalità della Todo List. Scopriremo come creare e gestire le rotte API in Laravel, come interagire con il database per salvare e recuperare le attività, e come creare un'interfaccia utente con Vue.js che permetta di aggiungere, modificare ed eliminare attività in tempo reale.

Seguendo questo approccio avrai una solida comprensione di come utilizzare Laravel e Vue.js insieme per creare applicazioni web moderne, dinamiche e reattive.