AngularJS et Laravel: Commencer à construire un CRM

() translation by (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:

1	php artisan serve

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:

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:

1	php artisan migrate:make create_customers_table

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:

1	Schema::create('customers', function ($table) {

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:

1	$table->increments('id');

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

1	$table->string('first_name');
2	$table->string('last_name');
3	$table->string('email')->unique();

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

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

1	$table->timestamps();
2	});

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:

public function up() {
	Schema::create('customers', function ($table) {
		$table->increments('id');
		$table->string('first_name');
		$table->string('last_name');
		$table->string('email')->unique();
		$table->timestamps();
	});
}

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

1	public function down() {
2	Schema::drop('customers');
3	}

Transactions

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

1	php artisan migrate:make create_transactions_table

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

1	Schema::create('transactions', function ($table) {

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

1	$table->increments('id');
2	$table->string('name');
3	$table->float('amount');
4	$table->integer('customer_id');

Et bien entendu les timestamps:

1	$table->timestamps();
2	});

Le code fini doit ressembler à ceci:

public function up() {
	Schema::create('transactions', function ($table) {
		$table->increments('id');
		$table->string('name');
		$table->float('amount');
		$table->integer('customer_id');
		$table->timestamps();
	});
}

Et maintenant la méthode down():

1	public function down() {
2	Schema::drop('transactions');
3	}

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):

'mysql' => array(
	'driver'    => 'mysql',                 // database driver, don't touch
	'host'      => 'localhost',             // host of the database, usually localhost unless you have your db on some server
	'database'  => 'database',              // name of the database you will be using, it must be created earlier
	'username'  => 'root',                  // username that the script will use to connect, I strongly advice against using root user for this
	'password'  => '',                      // password for the user above, it's better not to use a blank one
	'charset'   => 'utf8',                  // encoding of the db
	'collation' => 'utf8_unicode_ci',       // db's collation setting
	'prefix'    => '',                      // prefix of the database tables, useful if you have multiple scripts using the same database
),

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):

1	php artisan migrate

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:

1	class Customer extends 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):

1	public function transactions() {

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

1	return $this->hasMany('Transaction');
2	}
3	}

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:

class Transaction extends Eloquent {
	public function customer() {
		return $this->belongsTo('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:

1	class CustomerController extends BaseController {

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:

1	public function getIndex() {

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):

1	$id = Input::get('id');

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

1	return Customer::find($id);
2	}

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):

1	public function getAll() {
2	return Customer::all();
3	}

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:

1	public function postIndex() {

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():

1	if (Input::has('first_name', 'last_name', 'email')) {

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():

1	$input = 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:

1	if ($input['first_name'] == '' \|\| $input['last_name'] == '' \|\| $input['email'] == '') {
2	return Response::make('You need to fill all of the input fields', 400);
3	}

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:

1	$customer = new Customer;
2	$customer->first_name = $input['first_name'];
3	$customer->last_name = $input['last_name'];
4	$customer->email = $input['email'];

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

1	$customer->save();
2
3	return $customer;

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

1	} else {
2	return Response::make('You need to fill all of the input fields', 400);
3	}
4	}

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

1	public function deleteIndex() {

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

1	$id = Input::get('id');

Ensuite, on cherche et on supprime le client:

1	$customer = Customer::find($id);
2	$customer->delete();

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

1
2	return $id;
3	}
4	}

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:

1	Route::controller('/customers', 'CustomerController');

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:

1	curl -X POST -d "first_name=Jane&last_name=Doe&email=jdoe@gmail.com" http://localhost:8000/customers

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

1	curl http://localhost:8000/customers/all

TransactionController

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

1	class TransactionController extends BaseController {

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

1	public function getIndex() {
2	$id = Input::get('id');
3	return User::find($id)->transactions;
4	}

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:

1	public function postIndex() {

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

1	if (Input::has('name', 'amount')) {

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

1	$input = Input::all();

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

1	if ($input['name'] == '' \|\| $input['amount'] == '') {
2	return Response::make('You need to fill all of the input fields', 400);
3	}

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

1	$transaction = new Transaction;
2	$transaction->name = $input['name'];
3	$transaction->amount = $input['amount'];

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

1	$id = $input['customer_id'];
2	User::find($id)->transactions->save($transaction);

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

1	return $transaction;

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

1	} else {
2	return Response::make('You need to fill all of the input fields', 400);
3	}
4	}

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

	public function deleteIndex() {
		$id = Input::get('id');
		$transaction = Transaction::find($id);
		$transaction->delete();
		
		return $id;
	}
}

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

1	Route::controller('/transactions', 'TransactionController');

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.