Article - Comment développer une simple to-do list en Laravel - Vue ? - Chapitre 1 : Créer son projet

Comment développer une simple to-do list en Laravel - Vue ? - Chapitre 1 : Créer son projet

Dans un premier temps vous devez avoir installé composer et node js avant de suivre le reste de ce tutoriel. Effectivement, nous allons rentrer un certain nombre de commandes dans notre cmd. Ces-dernières ne sont pas connues de votre ordinateur de façon native et de ce fait il faut avoir ces dépendances.

Maintenant que tout est installé nous allons pouvoir créer notre projet. Tout d’abord créons notre projet Laravel.

Pour ce faire ouvrez votre cmd et entrez la commande suivante : “composer create-project --prefer-dist laravel/laravel blog”


Pièce jointe 588551


Nous pouvons alors constater que dans notre dossier todolist que nous venons de créer énormément de fichiers sont apparues. Nous allons donc utiliser un éditeur de code en l'occurrence Visual Studio Code afin de décortiquer peu tout ces nouveaux dossiers :


Pièce jointe 588552


Nous retrouvons ici des dossiers essentiels au fonctionnement de notre projet. Nous allons voir les plus essentiels :

1. “app” : Le dossier app est le dossier le plus important de votre projet. C'est celui qui contiendra votre application, c'est-à-dire, tout votre code PHP (fonctions, classes…).
2. “config” : Le dossier config permet la configuration du framework. À l'intérieur, chaque fichier correspond à une fonctionnalité configurable.
3. “database” : Le dossier database permet la gestion de la base données. Le principal sous-dossier est le sous-dossier migrations. Les migrations sont des fichiers permettant de décrire votre base de données afin de permettre à Laravel de créer, modifier ou supprimer les tables et les colonnes automatiquement pour vous. Les sous-dossiers seeds et factories ne sont pas utiles dans notre cas.
4. “resources” : Le dossier resources contient de nombreuses choses diverses. Principalement pour les autres fichiers de notre application qui ne sont pas du code PHP. Il sera essentiel lors du développement front du projet avec vue.
5. “routes” : Comme son nom l’indique ce fichier contient les routes de notre application nous reviendrons sur ce point plus tard.

Ensuite nous allons créer également notre projet Vue. Il faut savoir que dans le cas de la création d’un projet Laravel Vue les 2 dossiers contenant votre code communique par requête HTTP de ce fait il n’est pas obligatoire d’avoir vos 2 projets dans le même dossier. Dans notre cas nous allons partir du principe que nous créons notre projet dans le même dossier. Notre dossier s'appelle donc todolist nous allons alors sélectionner ce fichier dans notre cmd et installer le package front compatible avec Laravel. Pour ce faire dans votre cmd entrez les commandes suivantes : “cd todolist” (afin de cibler notre dossier todolist) puis “composer require laravel/ui”.


Pièce jointe 588553


Maintenant nous avons donc un projet laravel contenant les paquets de vue js. Pour autant la librairie Vue n’est pas utilisée dans notre projet. Pour l’utiliser il nous faut faire les commandes suivantes : “php artisan ui vue” et “npm install && npm run dev”


Pièce jointe 588554


Voilà, nous avons créé notre projet. Maintenant regardons ce que nous avons de nouveau dans notre dossier :


Pièce jointe 588555


Nous retrouvons donc de nouveau notre fichier “resources” mais maintenant dans “/resources/js” nous retrouvons le dossier “/components/” contenant ExampleComponent.vue. Voici notre premier component ou composant en français. C’est ici que nous allons utiliser le framework front Vue au cours de notre projet.

Je pense que nous en avons assez vu pour aujourd’hui. Dans le prochain chapitre nous allons voir comment configurer nos composants et à quoi ceux-ci servent.

Bonjour Biblux,

Merci pour cette contribution. Cependant, étant donné que vous comptez publier une série de tutoriels sur Laravel, et pour une meilleure visibilité, je vous propose d'intégrer notre équipe de rédacteurs bénévoles afin d'avoir vos articles publiés sous le format adéquat sur Developpez.com ( exemple d'article : introduction au framework web Angular).

Pour ce faire, vous aurez un accès aux forums privés de la rédaction afin d'y échanger avec nos autres rédacteurs sur les aspects techniques, bénéficier d'une relecture graphique avant publication sur les différents portails dédiés, et bénéficier d'un domaine gratuit qui hébergera vos tutoriels.

Je vous contacte par MP pour vous expliquer davantage le processus de publication.

Merci