Dans ce chapitre nous allons commencer la création de notre application de photos. La première chose va être d'installer Laravel et ensuite de changer le style pour le faire mieux correspondre à une galerie photos.

Les outils

Un bon artisan doit avoir de bon outils. Que nous faut-il pour Laravel ? D'abord un serveur PHP (minimum V 7.1.3) local, par exemple Apache, et un serveur MySQL (on peut aussi utiliser SQLite). Pour les utilisateurs de Windows je conseille vivement Laragon à la fois simple et complet. Pour les utilisateurs de Linux Laravel Homestead peut être une bonne solution. Pour PHP il nous faudra ces extensions :

• OpenSSL PHP Extension
• PDO PHP Extension
• Mbstring PHP Extension
• Tokenizer PHP Extension
• XML PHP Extension
• Ctype PHP Extension
• JSON PHP Extension

Il faut également un bon IDE, soit payant comme PhpStorm (mais il est gratuit pour les étudiants), soit gratuit comme Visual Studio Code. Il en existe bien d'autres ! On utilisera aussi Git, Composer et npm. Côté client maintenant tous les navigateurs, ou presque, sont équipés d'outils développeurs. personnellement j'aime bien Firefox Quantum. Pour le test des Emails une bonne solution est MailTrap.

L'installation

Pour installer Laravel c'est tout simple :

composer create-project laravel/laravel albumplus --prefer-dist 5.7.*

Si tout se passe bien au bout d'un moment vous devez avoir ce contenu dans le dossier albumplus : Et cet aspect : Pour compléter on va aussi installer l'authentification :

cd albumplus
php artisan make:auth

Il faut aussi créer une base de données, on va partir du principe qu'on utilise MySQL. Il faut bien paramétrer dans le fichier .env, par exemple pour une installation locale par défaut :

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=albumplus
DB_USERNAME=root
DB_PASSWORD=

Ensuite on lance les migrations :

php artisan migrate

Et on a les 3 tables dans la base : Et on gagne une barre de navigation pour l'authentification : Vérifiez que tous les formulaires fonctionnent : Et qu'on peut bien s'enregistrer et se connecter/déconnecter. Quand on se connecte on aboutit à cette page : On va aussi installer la barre de débogage :

composer require barryvdh/laravel-debugbar --dev

Vérifiez qu'elle s'installe correctement : Tant qu'on y est on va aussi ajouter la langue française. Téléchargez ce package et ajoutez le dossier du français ici : Et changez cette ligne dans le fichier config/app.php :

'locale' => 'fr',

Vous ne verrez la différence que pour la validation : Pour le reste il faudra un peu relever les manches...

Le style

On va maintenant se consacrer au style parce que ce n'est pas très joli pour le moment... On a à la racine un fichier package.json : On va le prendre tel quel et on lance l'installation :

npm install

Toutes les dépendances s'installent dans le nouveau dossier node_modules : Voilà, comme ça on va pouvoir utiliser mix. On a un fichier de configuration à la racine : Avec ce code :

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

On a les assets ici : Par défaut Laravel utilise Bootstrap 4 dans sa version sass avec des variables modifiées par le fichier _variables.scss. Si on regarde le fichier app.scss :

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

.navbar-laravel {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

On voit le chargement du fichier des variables et de Bootstrap dans le dossier node_modules. On a aussi un peu de style pour la barre de navigation et le chargement d'une police.

Le Javascript

Pour le Javascript on supprime tout ce qui concerne Vue.js. En résumé on va faire un peu le ménage. Supprimez le fichier resources/js/bootstrap.js et le dossier resources/js/components. Il doit vous rester ça :

Dans le fichier resources/js/app.js mettez ce code :

window._ = require('lodash');
window.Popper = require('popper.js').default;

try {
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
} catch (e) {}

Donc on charge lodash, popper (nécessaire pour certains composants de Bootstrap), JQuery et les librairies de Bootstrap. Et on lance mix :

npm run dev

On a régénéré les deux fichiers présents dans le dossier public : Normalement vous ne devriez pas remarquer de changement dans l'aspect des pages. Si ce n'est pas le cas vérifiez que vous avez bien suivi le processus !

L'aspect

On va supprimer la vue welcome : On va arriver directement sur la vue home. Pour que ça marche on va enlever la déclaration du middleware auth dans le contrôleur App/Http/Controllers/HomeController. Il va donc rester ce code :

<?php

namespace App\Http\Controllers;

class HomeController extends Controller
{
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('home');
    }
}

Et pour les routes (routes/web.php) :

Auth::routes();

Route::get('/', 'HomeController@index')->name('home');

On arrive donc maintenant ici : C'est devenu du n'importe quoi :)

Le layout

Le layout de base est ici : Changez le code pour celui-ci :

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Album') }}</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @yield('css')
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="{{ route('home') }}">{{ config('app.name', 'Album') }}</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            @guest
                <li class="nav-item"><a class="nav-link" href="{{ route('login') }}">@lang('Connexion')</a></li>
                <li class="nav-item"><a class="nav-link" href="{{ route('register') }}">@lang('Inscription')</a></li>
            @else
                <li class="nav-item">
                    <a id="logout" class="nav-link" href="{{ route('logout') }}">@lang('Déconnexion')</a>
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hide">
                        {{ csrf_field() }}
                    </form>
                </li>
            @endguest
        </ul>
    </div>
</nav>
@yield('content')
<script src="{{ asset('js/app.js') }}"></script>
@yield('script')
<script>
    $(() => {
        $('#logout').click((e) => {
            e.preventDefault()
            $('#logout-form').submit()
        })
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>
</body>
</html>

Ce qui donne cet aspect de la barre : Avec le bon effet "responsive" : Remarquez que les textes ont déjà été préparés pour le multi-langue avec la directive @lang :

@lang('Connexion')

On pourra ainsi ensuite facilement ajouter une langue. D'autre part comme on dispose de JQuery j'ai un peu remanié le code pour la déconnexion en adoptant ES6 qui est maintenant supporté par pratiquement tous les navigateurs. La barre est belle mais pour les formulaires il faudra un peu arranger l'aspect.

Un peu de CSS

Pour le moment on va continuer un peu notre stylisation. On va faire deux choses :

• harmoniser la couleur du fond de la page avec celle de la barre de navigation
• réserver un peu d'espace en haut de la page pour éviter que le contenu soit caché par la barre

Pour la couleur de fond on va changer la valeur de la variable $body-bg dans resources/sass/_variables.scss :

$body-bg: #343a40

Pour l'espace en haut on va faire ça dans resources/sass/app.scss :, et on en profite pour enlever la classe navbar-laravel :

body {
    padding-top: 70px;
}

On relance npm (vous pouvez aussi passer en mode watch pour que toutes les modifications soient automatiquement effectuées) :

npm run dev

Ce qui donne :

Si ça ne s'actualise pas dans votre navigateur lancez un rafraîchissement (en général CTRL F5)

La couleur est bien harmonisée et le formulaire décalé vers le bas. Il reste deux petits soucis dans notre application :

• elle s'appelle encore Laravel alors qu'on voudrait Album
• lorsqu'on se connecte on est renvoyés sur l'url /home qui n'existe plus.

Pour le premier point on règle ça dans .env :

APP_NAME=Album

Pour le second point on change cette propriété dans LoginController :

protected $redirectTo = '/';

Et tant qu'on y est on fait la même chose dans RegisterController, ResetPasswordController et VerificationController.

Conclusion

Dans ce chapitre on a vu :

• l'installation de Laravel avec l'authentification
• les migrations de base
• l'installation de la barre de débogage
• l'installation du français
• l'utilisation de mix pour installer JQuery et Bootstrap 4
• le remaniement des routes
• la modification du Layout
• l'utilisation du CSS pour styliser la page
• le changement du nom de l'application
• le remaniement des redirections dans les contrôleurs de l'authentification

Pour vous simplifier la vie vous pouvez charger le projet dans son état à l'issue de ce chapitre.