Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. PHP
Code

AngularJS et Laravel: Commencer à construire un CRM

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Building a Customer Management App Using AngularJS and Laravel.
AngularJS and Laravel: Finishing Building a CRM

French (Français) translation by Frédéric Arijs (you can also view the original English article)

Lors de la création d’une application web mono-page (single-page application ou SPA), il est bon d’utiliser un framework qui peut faire une partie du travail pour nous pour que nous puissions nous concentrer sur les fonctionnalités. AngularJS répond parfaitement à ce besoin, notamment grâce à l’injection de dépendances et au data binding. Parfois nous avons également besoin d’un serveur. Si votre choix c’est porté sur PHP alors Laravel est l’une des meilleures options, il est facile d’utilisation et très puissant.

Introduction

Avec ce tutoriel nous allons créer un système simple de gestion clients/transactions avec la possibilité d’ajouter et de supprimer aussi bien transactions que clients. Ce n’est probablement pas le genre de chose que l’on rencontre très souvent, mais cela permet de démontrer comment utiliser les caractéristiques des deux frameworks.

Avant de commencer, vous devez mettre en place la base de données MySQL que nous utiliserons (Laravel supporte de nombreuses base de données, mais c’est toujours la plus populaire). Vous n’avez pas besoin de serveur web puisque nous utiliserons celui intégré à PHP (mais attention, cette solution est pour le développement seulement et ne devrais jamais être utilisé en production, il manque de nombreuses caractéristiques pour faire fonctionner votre application sur un serveur publique). Pour cela, nous aurons besoin, au minimum, de la version 5.4.0 de PHP.

Préparation

La première chose à faire est d’installer Laravel. La procédure complète est décrite sur le site de Laravel. Ensuite, vous devriez avoir votre projet dans son répertoire avec tous les fichiers Laravel dedans. Rendez-vous dans ce répertoire avec une ligne de commande et lancez la commande:

Si tout est OK, vous devriez voir que le serveur local de développement est démarré à localhost:8000. Ouvrez votre navigateur et rendez-vous ici, vous devriez voir la page d’acceuil de Laravel:

first_run

Maintenant, nous pouvons nous occuper de l’application.

Migrations et modèles

Les modèles dans Laravel sont comme dans tous les autres frameworks MVC. Il utilise l’ORM Eloquent pour vous faciliter la tâche - vous ne devrez probablement plus à avoir à écrire une requête SQL (sauf si vous voulez quelques choses que Eloquent ne peut fournir). En utilisant les migrations, il est possible de modifier la structure de la base de donnée en gardant l’option de faire un rollback si quelque chose tourne mal. Vous pouvez en lire plus sur les migrations dans la documentation.

Dans notre applications, nous allons utiliser deux modèles:

  • Customer - qui contient les données des clients
  • Transaction - qui contient les informations à propos d’une transaction

Commençons par créer les migrations pour eux. Si ce n’est pas déjà fait, couper le serveur que nous avons démarré plus tôt (Ctrl + C).

Clients

Pour débuter, utilisons cette commande:

Cette commande va créer un fichier de migration avec une structure de base. Maintenant rendez-vous dans app/database/migrations. Il devrait y avoir un fichier dont le nom commence par un timestamp et finissant par “create_customers_table”. Laravel crée automatiquement cette structure de base pour vous. La méthode up() est appelée lorsque la migration est appliquée, et down() quand elle est annulée.

Commençons par appeler la méthode Schema::create(). Elle prend deux arguments - le nom de la table et une fonction callback:

La fonction callback est exécutée lorsque la table est créée. L’objet de la table est passé comme paramètre $table et nous pouvons l’utiliser pour manipuler la structure de la table. Ajoutons un champs id qui s’auto-incrémente:

Ensuite nous avons trois champs textes pour le prénom du client, son nom et son email:

Nous rendons le champs email unique en appellant la méthode unique().

La dernière méthode est pour le timestamp:

Ceci va créer deux champs date dans la table: created_at et updated_at. Ils seront utilisés par Eloquent pour stocker la date et l’heure de création et de mise à jour des données.

Au final, le code doit ressembler à ceci:

La méthode down() est beaucoup plus simple - elle supprime la table:

Transactions

Le code sera similaire à celui pour le client. Tout d’abord invoqué la commande:

Localisez et ouvrez le fichier dans app/database/migrations. Comme plus tôt, commencez par créer la table:

Ajoutez maintenant les champs pour l’id, le nom de la transaction, son coût et l’id de client auquel elle appartient:

Et bien entendu les timestamps:

Le code fini doit ressembler à ceci:

Et maintenant la méthode down():

Configuration de la base de données

Avant d’appliquer la migration, nous devons configurer la connexion à notre base de données. Ouvrez le fichier app/config/database.php et allez à la ligne 55. C’est là que se trouve les données de configuration pour MySQL (il y en a d’autre, vous pourriez utiliser SQLite ou Postgres par exemple):

Après avoir remplis les données, nous sommes prêts. Après vous être assurez d’avoir sauvé le fichier, entrez la commande suivante dans le dossier du projet (celui avec le fichier artisan dedans):

Et voilà! Si il n’y a pas eu d’erreurs, les tables ont bien été créée. Vous pouvez vous connecter à la DB en utilisant, par exemple, phpMyAdmin pour vérifier si vous le désirez.

Modèles

Avec Laravel, créer un modèle après avoir configurer la DB en utilisant la migration est très rapide. Rendez-vous dans app/models et supprimer le fichier d’exemple User.php qui s’y trouve. Maintenant créez deux fichiers appelés Customer.php et Transaction.php

Commençons par Customer.php. Tous les modèles dans Laravel étendent la classe Eloquent:

Nous allons définir une relation entre le client et ses transactions. Pour l’obtenir, nous devons créer une méthode publique dans le modèle avec le nom de la propriété que nous souhaitons avoir (transactions dans ce cas):

Dans le corps de cette fonction, il n’y aura qu’une ligne:

Ceci informe Eloquent qu’il devrait fournir toutes les transactions avec customer_id du client sous la propriété transactions.

Nous allons faire pratiquement la même chose pour les transactions, mais en inversant la relation pour rendre le propriétaire de la transaction accessible via la propriété customer:

On obtient cela grâce à la méthode $this->belongsTo() du modèle.

Contrôleurs

Pour utiliser nos modèles, nous devons créer des contrôleurs. Dans le répertoire app/controllers, supprimez HomeController.php seulement - BaseController.php est important, nos contrôleurs vont devoir l’étendre. Créez deux fichiers: CustomerController.php et TranscationController.php.

CustomerController

Ce contrôleur est responsable de tout ce qui touche au client - ajout, suppression et affichage d’une liste. Commencez par définir une classe:

Nous allons utiliser un composant de Laravel appelé contrôleur RESTful. Il rend la création de routes très facile puisque nous devons seulement définir une URI de base et Laravel s’occupera de tout pour nous. Cela demande seulement de commencer le nom de nos fonctions avec le bon verbe HTTP et ensuite le reste de la route (en utilisant camelCase). Par exemple, si nous souhaitons avoir une méthode getNames et que l’URI de base est /customers, alors la méthode sera accessible à /customers/names.

Les méthodes getIndex(), postIndex(), deleteIndex() seront dirigées vers la route par défaut (dans ce cas /customers).

Définissons notre première route - retrouvez un client par son id:

Commençons par récupérer l’id depuis les paramètres de la requête (Laravel fournit une classe Input pour gérer cela, nous ne devons donc pas utiliser $_GET, $_POST et $_FILES):

Et cherchons cet utilisateur dans la base de données en utilisant cet id:

Toutes les méthodes du contrôleurs doivent retourner une valeur sous forme de chaîne de caractère ou qui possède une méthode __toString(). Dans le cas du modèle Customer qui est retourner, il sera converti en JSON avant d’être envoyé.

Retournons également une liste de tous les utilisateurs (qui sera accessible à /customers/all):

Comme vous pouvez le voir, nous pouvons obtenir tous les clients grâce à la méthode all() du modèle.

Maintenant, la partie la plus longue, ajouter un nouveau client:

Nous allons d’abord vérifier que toutes les informations nécessaires sont fournies. Nous pouvons faire ça en utilisant la méthode Input::has():

Nous pouvons mettre tous les paramètres dans une variable $input pour éviter d’appeler sans cesse Input::get(). Ceci peut être réalisé en utilisant Input::all():

Nous allons vérifier si l’un des paramètres est vide. Si c’est le cas, nous retournerons une erreur HTTP 400 Bad Request avec un message explicite:

Comme nous voulons retourner un code autre que 200 au lieu de retourner juste un message, nous utilisons Response::make(), qui prend la donnée à renvoyer en premier paramètre et un code de statut en second. Jetez un oeil à la documentation si vous voulez en savoir plus sur les réponses.

Enfin, nous pouvons créer un nouveau modèle Customer et le remplir avec les données fournies:

Il ne nous reste plus qu’à sauver le modèle fraîchement créer et le renvoyer comme réponse à la demande:

Il nous reste à gérer le cas où tous les paramètres n’ont pas été fournis:

Enfin, nous devons avoir la possibilité de supprimer un client. C’est vraiment très court:

Nous commençons par récupérer l’id du client à supprimer:

Ensuite, on cherche et on supprime le client:

Nous renvoyons l’id fournis comme réponse à la requête:

Avant que les routes ne soient accessibles, nous devons les définir. Ouvrez le fichier app/routes.php, supprimez tout sauf le commentaire et ajoutez cette ligne à la fin du fichier:

Cela dit à Laravel de diriger toutes les requêtes à /customers vers notre CustomerController. Maintenant nous pouvons utiliser CURL pour jouer avec. D’abord démarrez le server avec php artisan serve et ensuite vous pouvez, par exemple, créer un client:

Ou récupérer la liste de tous les clients:

TransactionController

Celui-ci, comme le modèle, est très similaire au CustomerController. Tout d’abord créons la classe:

Définissons la méthode qui permet d’avoir toutes les transactions pour un utilisateur:

Comme vous pouvez le voir, nous utilisons la relation définie plus tôt pour récupérer les transactions (maintenant imaginez le query que vous devriez écrire pour avoir le même résultat en PHP et SQL).

Ensuite de quoi créer les transactions:

Comme plus tôt, nous vérifions que toutes les informations nécessaires sont fournies:

Et si oui, nous les assignons à une variable $input:

Vérifier si l’une des valeurs est vide et renvoyer une erreur si c’est le cas:

Nous créons ensuite la transaction et la remplissons avec toutes les données:

Il nous reste à l’ajouter au bon client. Nous le retrouvons grâce à l’id fournis et ajoutons $transaction à sa liste de transactions:

Nous utilisons la méthode transactions->save() fournie par Laravel. Nous pouvons répondre avec la transaction qui vient d’être créée:

Et gérer le cas où aucune ou une partie des données était manquante:

Il nous reste la méthode pour supprimer une transaction comme pour la suppression d’un client:

Enfin, il reste à ajouter la route et à tester le contrôleur avec CURL:

Conclusion

Nous voilà à la fin de cette première partie - dans la seconde partie de ce tutoriel, nous créerons le front-end avec AngularJS. N'hésitez pas à ajouter des fonctionnalités à l’application (comme l’édition de clients ou le tri), dans le cas où vous ne trouvez pas l’information que vous cherchez, jetez un oeil à la documentation de Laravel.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.