1.1.2.1 A l’aide de la commande composer :

composer create-project --prefer-dist laravel/laravel tp_mvc

1.1.2.2 A l’aide de la commande laravel :

Dans ce cas il faut dans un premier temps ajouter la commande laravel dans votre environnement personnel (à faire une fois).

composer global require "laravel/installer"

puis ajouter la commande dans votre PATH à l’aide de la commande :

export PATH=$HOME/.composer/vendor/bin:$PATH

Si vous ne voulez pas le faire à chaque fois que vous ouvrez un terminal, il faut ajouter la commande précédente dans votre fichier ~/.bashrc.

La commande laravel est maintenant disponible. Pour créer un nouveau projet Laravel, il faut utiliser la commande

laravel new tp_mvc

1.1.2.3 L’archive disponible

Si le réseau ne supporte pas la charge, demandez à l’enseignant de vous fournir l’archive de départ. Après l’avoir décompressée, vous avez un répertoire qui contient le même résultat que celui obtenu à l’aide des commandes précédentes.

Déplacez vous dans le répertoire créé et tapez la commande suivante :

php artisan key:generate

1.1.2.4 Adaptation du thème

Nous allons modifier le thème fourni par Laravel

1. Remplacer le fichier package.json avec celui-ci (@fortawesome/fontawesome-free en plus).
2. Copier l’archive assets.zip et décompressez la dans le répertoire resources.
3. Copier le fichier bienvenue.blade.php dans le répertoire resources/views.
4. Remplacer le fichier webpack.mix.js avec celui-ci.

5. Adaptation à l’environnement de l’IUT

   La gestion du thème est assuré par le fichier webpack.mix.js qui contient les instructions pour agréger les fichiers javascript et générer un fichier de style css. L’utilisation de webpack associé avec webpack.mix.js nécessite de nombreuses librairies qui sont téléchargées depuis internet à l’aide de la commande npm install. Pour accelerer cette phase vous suivrez les instructions suivantes :

   1. Créez un répertoire robert.duchmol dans le répertoire /local (remplacez robert.duchmol par votre prénom et votre nom).
   2. Dans le répertoire créé, décompressez l’archive node_modules.tar.gz ( Note : la décompression de cette archive correspond à l’exécution de la commande npm install).
   3. Dans le répertoire racine de votre projet, créez un lien symbolique vers le répertoire node_modules local à votre machine

   4. Copier le fichier webpack.mix.js dans le répertoire /local/robert.duchmol

      cd /repertoire/de/votre/projet/tp_mvc
      rm -rf node_modules
      ln -s /local/robert.duchmol/node_modules
      cp webpack.mix.js /local/robert.duchmol
      npm install
      npm run dev

6. Dans le fichier routes/web.php, remplacez la ligne

       return view('welcome');

   par

       return view('bienvenue');

1.3.1.1 Test de notre thème

Pour tester notre thème, nous allons modifier la page resources/views/welcome.blade.php avec le code qui suit.

Note: La balise @yield('content') du fichier layout/master.blade.php sera remplacée par le code qui se trouve entre les balides @section('content') et @endsection

@extends("layout.master")


@section('content')

    <!--Start your project here-->
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="view overlay  hm-white-light z-depth-1-half">
                    <img src="{{asset('images/logo-iut.png')}}" class="img-fluid" alt="" style="margin-top: 2rem;">
                </div>
                <br>
            </div>

            <!--Main information-->
            <div class="col-md-9">
                <h2 class="h2-responsive">IUT de Lens</h2>
                <hr>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies euismod arcu. Aliquam
                    imperdiet laoreet nibh, sed posuere dolor feugiat sed. In in dolor et metus cursus ultrices. Nullam
                    blandit eu est a mollis. Cras elit quam, semper id ornare vitae, sodales eget nibh. Nulla dignissim
                    sodales quam, id placerat eros porttitor nec. Proin molestie eros vel tortor tempus, sit amet
                    placerat est pharetra. Vivamus a congue nibh, at lacinia libero. Nullam tristique posuere
                    feugiat.</p>

                <p>Nam fermentum eget lectus commodo luctus. Pellentesque ornare pellentesque justo eget suscipit. Nam
                    pellentesque pulvinar neque sit amet elementum. Aliquam euismod neque sed ipsum scelerisque, sed
                    tempor enim varius. Sed quis scelerisque orci. Ut id vehicula magna. Etiam sed rutrum nunc, a
                    vulputate mi. Phasellus tortor tortor, tempor quis metus et, efficitur congue dui. Suspendisse ac
                    leo eros. Praesent lobortis diam nunc, eget tincidunt ipsum laoreet eget. Proin ut sapien sed neque
                    lacinia accumsan. Vivamus consectetur porta elementum. Etiam id laoreet risus, vitae blandit ipsum.
                    Integer libero libero, sodales et feugiat ut, finibus vel arcu. Ut quis tortor rhoncus, blandit est
                    ut, sodales purus.
                    Sed gravida consectetur ex, non viverra dui venenatis a.</p>

                <a href="http://www.iut-lens.univ-artois.fr" class="btn btn-primary">Plus d'info!</a>
            </div>
        </div>
    </div>
@endsection

Vérifier que le thème fonctionne.

1.3.2.1 La page d’accueil

La page d’accueil va afficher la déclaration universelle des droits de l’homme à partir d’un fichier au format markdown. Nous allons avoir besoin d’une librairie tiers michelf/php-markdown, Pour la récupérer vous utiliserez la commande

composer require michelf/php-markdown

Le fichier droitsDeLHomme.md contient le code markdown de la déclaration universelle des droits de l’homme. Il faut ajouter le fichier droitsDeLHomme.md dans le répertoire public/md (qu’il faut créer)

Nous allons créer la classe MarkdownService qui contient la méthode parse qui transforme un fichier markdown en html. Voici le code de cette classe :

<?php
<?php

namespace App\Helpers;
use Michelf\MarkdownExtra;

class MarkdownService {
    public static function parse($file) {
        $file = file_get_contents(public_path('md').'/'.$file);

        if ($file) {
          $parser = new MarkdownExtra();
          $parser->code_class_prefix = "language-";
          $parser->code_attr_on_pre = true;
          $html = $parser->transform($file);
          return $html;
        } else {
          return $file."<br>";
        }
    }
}

L’affichage de la page d’accueil se fera à partir de la règle

Route::get('/', 'WelcomeController@index');

La fonction index du contrôleur va déclencher la transformation du code markdown en code html.

function index() {
  return view('welcome.index')->with('htmlContent',MarkdownService::parse('droitsDeLHomme.md'));
}

Note: La méthode index utilise le template welcome.index qui correspond au fichier resources/views/welcome/index.blade.php. Le template utilise une balise de type {!! $var !!} pour pouvoir afficher du code html.

Note: La route (http://localhost:8000) déclenche l’exécution de la méthode index dans le contrôleur WelcomeController. Il faudra donc modifier la route qui est indiqué dans le fichier routes/web.php.

Ajouter le fichier MarkdownService.php dans le répertoire app (trouvez le bon endroit !).

Ajouter la fonction index dans le contrôleur WelcomeController.

Créer le template ìndex dans le fichier resources/views/welcome/index.blade.php.

1.3.2.2 La page A Propos et Contact

Récupérer le code des pages apropos.blade.php et contact.blade.php.

Modifier le contrôleur WelcomeController.

Modifier le fichier des routes (le fichier routes/web.php) en accord avec le contrôleur WelcomeController.

Note: Les liens dans le fichier navbar.blade.php doivent être cohérents avec les routes que vous avez ajoutées.

1.4.1.1 Connexion avec la base de données de votre SGBD

Laravel propose une connexion simplifiée avec un système de base de données. Le fichier de configuration .env permet de spécifier

• le système de gestion de base de données (mysql, pgsql, …)
• le nom de la base de données
• l’identifiant de l’utilisateur
• le mot de passe de l’utilisateur

Voici un extrait du fichier .env qui concerne les informations de connexion avec un SGBD :

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lar_tache
DB_USERNAME=duchmol
DB_PASSWORD=secret

Les informations indiquées dans le fichier .env surchargent les informations données dans le fichier config/database.php.

Modifier le fichier .env pour établir une connexion entre votre application web et votre SGBD

Note: Pour que les modification dans le fichier .env soient prises en compte, il faut relancer le serveur de développement. php artisan serve

1.4.1.2 Création de la table taches

Laravel propose une commande qui permet de créer l’infrastructure de gestion de la persistance de données dans une base de données.

Pour chaque table cette infrastructure se compose de trois éléments :

1. Une description des colonnes de la table;
2. Un modèle qui sera utilisé pour échanger entre l’application et la base de données;
3. Un contrôleur qui fait le lien entre la vue et le modèle.

Pour créer l’infrastructure il faut exécuter la commande :

php artisan make:model Tache -mcr

Note: il est possible de créer chaque élément de l’infrastructure indépendamment des autres

php artisan make:model Tache
php artisan make:migration --create=taches create_taches_table (-m)
php artisan make:controller TacheController --resource (-cr)

Note: il est possible d’utiliser des tables d’une base de données qui existent déjà. Dans ce cas il suffit de créer uniquement le modèle et le contrôleur.

php artisan make:model Tache
php artisan make:controller TacheController

Si le nom de la table n’est pas celui attendu (nom du modèle avec un pluriel et sans majuscule modèle Tache -> table taches) il faut le spécifier, de la même façon pour la valeur de la clé primaire et l’ajout optionnel de la date de création et de modification d’un enregistrement.

namespace App;
use Illuminate\Database\Eloquent\Model;
class Tache extends Model {
  protected $table = 'mes_taches';
  public $primaryKey = 'ma_cle';
  public $timestamps = false;
}

Utiliser la commande pour créer l’infrastructure de la table taches

1.4.1.3 Création des colonnes de la table taches

Laravel dispose d’une commande qui permet de modifier les tables de la base de données.

php artisan migrate

Cependant avant d’utiliser cette commande il faut indiquer le contenu de la ou des tables. Pour cela il faut éditer le contenu du fichier database/migrations/xxx_create_taches_table.php et plus particulièrement la fonction up() (voir la documentation pour obtenir plus d’information sur les types de colonne disponibles).

public function up()
{
    Schema::create('taches', function (Blueprint $table) {
        $table->increments('id');
        $table->date('expiration');
        $table->string('categorie',30);
        $table->text('description');
        $table->enum('accomplie',['O','N']);
        $table->timestamps();
    });
}

Si vous souhaitez réinitialiser votre tables dans la base de données, Laravel propose la commande

php artisan migrate:refresh

Note: Le mécanisme de migration est géré par Laravel à l’aide d’une table migration qui est ajoutée dans votre base de données. Si vous avez des erreurs lors de la migration, et que vous ne voulez pas revenir en arrière, la suppression de cette table peut vous aider à repartir de zéro.

Note: Si vous avez l’erreur suivante :

    [PDOException]                                                                                      
    SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length  
    is 767 bytes   

Il faut ajouter le code suivant dans la classe AppServiceProvider.php (répertoire app/Providers)

use Illuminate\Support\Facades\Schema;

public function boot() {
  Schema::defaultStringLength(191);
}

Modifier la fonction up() et utiliser la commande qui permet de créer la table taches

1.4.1.4 Ajout d’un contenu à la table taches

Laravel propose un mécanisme ‘seed’ qui permet d’ajouter un contenu aux tables de votre base de données. Nous allons utiliser ce mécanisme en association avec la librairie Faker pour générer un contenu aléatoire dans la table taches.

Note: Ce mécanisme est généralement utilisé pour mettre en place plus facilement un jeu de données pour tester votre application. Il vous faudra récupérer la librairie qui contient la classe Faker à l’aide de la commande : composer require --dev fzaninotto/faker Ici on a utilisé require --dev comme commande car la librairie ne sera utilisée que pendant la phase de développement et de tests.

Dans un premier temps nous allons définir le domaine aléatoire de chaque colonne de la table taches. A l’aide de la librairie Faker, on peut définir simplement une fabrique d’enregistrements.

Le code qui suit placé dans le fichier database/factories/TacheFactory.php permet de créer un enregistrement pour la table taches.

$factory->define(
    App\Tache::class,
    function (Faker\Generator $faker) {
        $createAt = $faker->dateTimeInInterval(
            $startDate = '-6 months',
            $interval = '+ 180 days',
            $timezone = date_default_timezone_get()
        );
        return [
            'expiration' => $faker->dateTimeInInterval(
                $startDate = '-6 months',
                $interval = '+ 180 days',
                $timezone = date_default_timezone_get()
            ),
            'categorie' => $faker->randomElement($array = array('Urgent', 'A Faire', 'Optionnel')),
            'description' => $faker->paragraph,
            'accomplie' => $faker->randomElement($array = array('O', 'N')),
            'created_at' => $createAt,
            'updated_at' => $faker->dateTimeInInterval(
                $startDate = $createAt,
                $interval = $createAt->diff(new DateTime('now'))->format("%R%a days"),
                $timezone = date_default_timezone_get()
            ),
        ];
    }
);

Dans un deuxième temps nous allons utiliser cette création aléatoire de données pour ajouter des données dans la table taches. Pour cela nous allons créer une classe TacheTableSeeder dans le répertoire database/seeds.

La classe a le contenu suivant:

class TacheTableSeeder  extends Seeder{

    public function run()
    {
        factory(App\Tache::class, 10)->create();
    }
}

L’exécution de la méthode run va créer les enregistrements (10 ici) et les ajouter à la table taches de la base de données.

Laravel propose une commande pour déclencher la génération et l’ajout de données aléatoire (et ou de tests) dans la base de données.

php artisan migrate:refresh --seed

qui a pour effet de ré-initialiser la base de données et d’y ajouter des données.

Cette commande lance l’exécution de la méthode run de la classe DatabaseSeeder dans le répertoire database/seeds. Pour que notre classe TacheTableSeeder soit utilisée, il faut ajouter la ligne

         $this->call(TacheTableSeeder::class);

dans la méthode run de la classe DatabaseSeeder.

Note: Pour que la classe TacheTableSeeder soit visible, il faut réinitialiser composer à l’aide de la commande suivante :

composer dumpautoload

Ajouter 20 tâches aléatoires dans la table taches

1.4.1.5 Tests et utilisation de l’API DB

Dans la suite de ce TP nous allons utiliser l’API DB proposée par Laravel et en particulier les requêtes au format Query Builder. La documentation vous donne un aperçu des possibilités de l’API. Pour tester le bon fonctionnement de l’accès à notre modèle à partir de l’API, le plus simple est d’écrire un fichier de tests.

Pour cela nous allons utiliser une base de données de tests. Nous allons ajouter une configuration de base de données supplémentaire dans le fichier config/database.php. Nous allons ajouter une connexion sqlite_testing qui permet de faire les tests dans une base de données sqlite en mémoire. Après modification :

// début du fichier config/database.php
// ... 
    'connections' => [
        'sqlite_testing' => [
            'driver'   => 'sqlite',
            'database' => ':memory:',
            'prefix'   => '',
        ],
        'sqlite' => [
            'driver' => 'sqlite',
            'database' => env('DB_DATABASE', database_path('database.sqlite')),
            'prefix' => '',
        ],

//... autres configurations

La configuration

La classe DBTest dans le répertoire tests/Unit permet de tester les quatre opérations de base (Création, Selection, Modification, Suppression):

<?php

namespace Tests\Unit;

use App\Tache;
use Illuminate\Support\Facades\Artisan;
use Illuminate\Support\Facades\DB;
use Tests\TestCase;

class DBTest extends TestCase {

    /**
     * Creates the application.
     *
     * @return \Illuminate\Foundation\Application
     */
    public function createApplication() {
        // Utilisation de l'environnement de test
        putenv('DB_DEFAULT=sqlite_testing');

        $app = require __DIR__.'/../../bootstrap/app.php';

        $app->make('Illuminate\Contracts\Console\Kernel')->bootstrap();

        return $app;
    }

    public function setUp() {
        parent::setUp();
        Artisan::call('migrate');
        // Création des données de tests
        factory(Tache::class)->create(
            [
                'expiration' => "2017-08-31",
                'categorie' => 'Urgent',
                'description' => 'Teste la table tache',
                'accomplie' => 'N',
            ]
        );
        factory(Tache::class, 5)->create(['categorie' => 'Urgent']);
        factory(Tache::class, 5)->create(['categorie' => 'Bidon']);
    }


    public function testModelTest() {
        $taches = factory(Tache::class, 3)->make();
        $this->assertEquals(count($taches), 3);
    }

    public function testAccesDBTest() {
        $taches = DB::table('taches')->get();
        $this->assertEquals(count($taches), 11);
    }

    public function testAccesDBWithIDTest() {
        $tache = DB::table('taches')->where('id', 1)->first();

        $this->assertEquals($tache->expiration, '2017-08-31');
        $this->assertEquals($tache->categorie, 'Urgent');
        $this->assertEquals($tache->description, 'Teste la table tache');
        $this->assertEquals($tache->accomplie, 'N');
    }

    public function testUpdateDBWithIDTest() {
        DB::table('taches')->where('id', 1)->update(
            [
                'categorie' => 'A Faire',
                'description' => 'Teste modif de la table tache',
                'accomplie' => 'O',
            ]
        );
        $tache = DB::table('taches')->where('id', 1)->first();

        $this->assertEquals($tache->expiration, '2017-08-31');
        $this->assertEquals($tache->categorie, 'A Faire');
        $this->assertEquals($tache->description, 'Teste modif de la table tache');
        $this->assertEquals($tache->accomplie, 'O');
    }

    public function testDeleteDBWithIDTest() {
        DB::table('taches')->where('id', '>', 1)->delete();
        $taches = DB::table('taches')->get();
        $this->assertEquals(count($taches), 1);
    }


    public function tearDown() {
        Artisan::call('migrate:reset');
        parent::tearDown();
    }
}

Tester le bon fonctionnement de l’API DB

En utilisant la documentation Query Builder et en analysant le fichier de tests, comment fait-on pour récupérer les tâches dans la table taches

Comment modifier un enregistrement de la table taches à l’aide de l’API DB

Comment supprimer un enregistrement de la table taches à l’aide de l’API DB

1.4.2.1 Les directives

Laravel permet de simplifier l’écriture des templates blade en utilisant des directives. Dans la suite du TP nous allons utiliser deux directives :

• accomplie qui renvoie un boolean qui vaut false si l’expression $expr est vide ou contient la chaîne de caractères “N” et true sinon;
• frdatetime qui renvoie la date donnée en paramètre en français.

Le code qui suit doit être ajouter dans la fonction boot de la classe AppServiceProvider dans le répertoire app/Providers.

        Blade::if('accomplie', function ($expr) {
            return  (empty(with($expr)) || with($expr) === 'N' ? false : true);
        });
        Blade::directive(
            'frdatetime',
            function ($expr) {
                $ret = "<?php ";
                $ret .= "setlocale(LC_TIME, 'fr_FR');";
                $ret .= "echo Carbon\Carbon::parse(with({$expr}))->formatLocalized(\"%A %d %B %Y\");";
                $ret .= "?>";

                return $ret;
            }
        );

Créer le contrôleur TacheController

Ajouter les routes dans le fichier le fichier routes/web.php

Ajouter les directives dans le fichier AppServiceProvider

1.4.4.1 La fonction old

Laravel met à votre disposition (stocke dans une variable flash) les valeurs saisies dans un formulaire pour pouvoir les ré-injecter dans le même formulaire en cas d’erreur (voir la documentation old input).

Note: En effet, en cas d’erreur dans la saisie d’un formulaire (voir la suite du TP), Laravel redirige la requête vers la page qui contient le formulaire. La fonction old, vous aide à extraire les valeurs précédemment saisies pour les afficher dans le formulaire. Sans ce mécanisme, du fait de la redirection (nouvelle requête), les données saisies seraient perdues (il faudrait les stocker dans une session).

Mettre en place la saisie d’une tâche

1.4.4.2 La validation et le stockage d’une tâche

Comme vu précédemment, la fin de la saisie du formulaire déclenche l’exécution de la fonction store du contrôleur TacheController. Cette fonction va valider les données saisies et seulement si toutes les données sont correctes alors la sauvegarde dans la base de données est effectuée. En cas d’erreur, Laravel renvoie automatiquement vers la page contenant le formulaire, le programmeur peut alors indiquer les erreurs à l’utilisateur en utilisant la variable errors.

Laravel propose un mécanisme de validation qui fonctionne à l’aide de règles de validation. Pour plus de précisions voir la documentation sur les règles de validation. Il est possible d’indiquer :

• qu’un champ est obligatoire
• que le champ doit avoir une valeur numérique, alphabétique, suivre le format d’une expression régulière, …
• qu’un champ est une adresse mail
• qu’un champ doit avoir entre plus de n caractères et/ou moins de m caractères, …
• …

L’extrait de programme suivant donne un exemple de règles pour valider la saisie d’une tâche.

        $this->validate(
            $request,
            [
                'expiration' => 'required|',
                'categorie' => 'required',
                'description' => 'required',
                'accomplie' => 'nullable',
            ]
        );

Si la fonction s’exécute sans erreur alors le code qui suit est exécuté, sinon la requête est redirigée vers la page contenant le formulaire.

Voici le code complet de la fonction store :

    public function store(Request $request)
    {
        $this->validate(
            $request,
            [
                'expiration' => 'required|',
                'categorie' => 'required',
                'description' => 'required',
                'accomplie' => 'nullable',
            ]
        );
        $input = $request->only(['expiration', 'categorie', 'description', 'accomplie']);
        DB::table('taches')->insert(
            [
                'expiration' => $input['expiration'],
                'categorie' => $input['categorie'],
                'description' => $input['description'],
                'accomplie' => (isset($input['accomplie']) ? 'O' : 'N'),
            ]
        );

        return redirect('/taches');
    }

Le paramètre request de type Request contient les informations de la requête (voir la documentation HTTP requests) et en particulier les données saisies dans le formulaire. L’instruction

    $input = $request->only(['expiration', 'categorie', 'description', 'accomplie']);

stocke dans la variable $input de type tableau associatif les champs contenant les informations de la tâche à créer. L’instruction qui suit (dans le code qui précède), déclenche l’insertion d’un nouvel enregistrement dans la table taches.

Mettre en place la validation et le stockage d’une tâche