Laravel 5

Laravel 5.7 par la pratique – Installation et style

15 septembre 2018 /

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.

 

Print Friendly, PDF & Email

21 commentaires

  • spyb0t

    30 janvier 2020 à 15 h 19 min

    bjr bestmomo
    j’utilise la vesrion 6.12 de laravel actuellement ,donc pour gerer l’authentification j’ai du procede autrement en utilisant laravel/ui,
    jusqu’a la tous fonctionne bien ,l’inscription et la connexion.mais une fois que je suis connecter ,lorsque je veux me deconnecter j’ai cette erreur: The GET method is not supported for this route. Supported methods: POST.
    quel peut etre le souci ? merci.
    desoler pour les acsents mon clavier est en anglais.

  • mlkiopm

    1 août 2019 à 21 h 12 min

    Bonjour,
    Dans un premier temps merci pour ce tuto fort intéressante, Je viens vers vous car j’ai un problème sur la Responsivité, en effet, quand j’inspecte l’effet responsive je le menu déroulant qui laisse apparaître l’onglet connexion et identification n’apparaît pas

  • un_passant

    29 juillet 2019 à 13 h 15 min

    Bonjour pour ce cours très pratique en Laravel.

    J’ai tenté de prendre l’ensemble du projet sur git pour avoir un aperçu avant de poursuivre l’apprentissage de ce cours et je n’arrive pas à le faire fonctionner correctement.
    J’ai configuré le .env, généré la clef puis fait un composer update
    Le truc, c’est que j’ai pris les dernières versions de toutes les dépendances y compris en –dev dans le composer.json (Laravel 5.8 etc).
    J’ai ensuite fait la migration et quand je fais une inscription , je tombe sur le formulaire et en validant j’ai une erreur de type:

    Symfony \ Component \ Debug \ Exception \ FatalThrowableError (E_ERROR)
    __clone method called on non-object

    et ça pointe sur la ligne: $this->notifiables = clone $this->notifiables;

    dans:
    public function __clone()
    {
    $this->notifiables = clone $this->notifiables;
    $this->notification = clone $this->notification;
    }

    dans le fichier : /vendor/laravel/framework/src/Illuminate/Notifications/SendQueuedNotifications.php

    alors j’ai pensé à une résolution ici:
    https://github.com/laravel/framework/issues/21939 (tout en bas de page)
    mais je ne sais pas comment appliquer la solution car je débute en laravel

    j’ai meme eu droit à un probleme de longueur de chaine au début mais j’ai résolu par ça:
    https://laravel-news.com/laravel-5-4-key-too-long-error

    Et là, la page d’accueil ne pointe pas directement sur le formulaire, j’ai rien à la place du formulaire, obligé de cliqué directement sur login ou inscription ^^
    (warning: Erreur dans les liens source : request failed with status 404
    URL de la ressource : http://localhost:8000/js/app.js
    URL du lien source : bootstrap.js.map)
    J’ai essayé sous différent navigateur , même résultat.

    Si tu as une idée,je pense pas que j’ai besoin de configurer le smtp dans le cas d’une inscription, si ? ou alors c’est possible de simuler le smtp avec le protocole log ?

    Merci pour ton aide

      • un_passant

        29 juillet 2019 à 17 h 41 min

        ok, mais je pense que le seul soucis c’est juste le probleme de notification,
        saurais-tu comment appliquer la méthode de résolution du lien github ? la personne à mis cela en fixed pour exactement le meme probleme:

        Thanks, for those with the same problem I fixed by defining this inside my Users.php

        public function routeNotificationForFcm() {
        return $this->devices->pluck(« fcm_token »)->toArray();
        }

        Firing the notification with this:

        $users = User::whereHas(‘priorities’, function ($query) use ($occurrence) {
        $query->where(‘level’, $occurrence->priority->level);
        })->get();

        Notification::send($users, new OccurrencePriorityNotification($occurrence));

        And getting the tokens inside my channel with this:

        public function send($notifiable, Notification $notification) {
        if(empty($tokens = $notifiable->routeNotificationFor(‘fcm’))) {
        return;
        }
        // …
        }

        je ne sais pas où placer ça:
        $users = User::whereHas(‘priorities’, function ($query) use ($occurrence) {
        $query->where(‘level’, $occurrence->priority->level);
        })->get();

        Notification::send($users, new OccurrencePriorityNotification($occurrence));

        ni ça :
        public function send($notifiable, Notification $notification) {
        if(empty($tokens = $notifiable->routeNotificationFor(‘fcm’))) {
        return;
        }
        }
        Il ne précise pas si il l’a mis dans le fichier User.php ou pas….

          • un_passant

            29 juillet 2019 à 19 h 25 min

            ok mais avant , peut-tu me dire si en faisant un simple ‘composer update’ de ton projet, sans toucher au composer.json que ça va continuer à marcher ?

            J’ai repris le projet sans toucher aux version , mais meme avec un simple composer update, ça me donne l’erreur de notification…
            Je peux pas croire que ça soit lié à MySQL 8.0.15….

          • bestmomo

            30 juillet 2019 à 13 h 07 min

            Salut,

            Oui j’ai vu que tu as fait un fork du projet, tu as changé juste pour la base de données la longueur par défaut des strings, en général on fait ça quand on est dans une version ancienne de MYSql, mais là tu dis que tu utilises la version 8. C’est une version très récente et je ne suis pas sûr que Laravel l’ait déjà prise en compte. J’ai lu quelque part que certains types de data ne seraient plus reconnus. Il y a aussi certains changements au niveau des clés primaires. Avec un « composer install » à partir de ton fork ça devrait fonctionner sauf justement si MYSql est bloquant.

          • un_passant

            21 août 2019 à 18 h 36 min

            Bonjour,
            Je reviens après une longue pause ^^

            Bon déjà , j’avais fais une erreur de big débutant: au lieu de faire un php artisan migrate –seed pour créer les tables ET remplir ces dernieres, je n’avais fais qu’un php artisan migrate.

            Le résultat c’est que tout marche avec toutes les dernières version du composer.json (Laravel 5.8.33 etc) ET MySql 8.0.15 ^^

            Par contre, j’ai plusieurs questions:
            1/Si les tables sont vides au départ et que je veux débuter par une inscription pourquoi cela ne marche pas ? (d’où l’erreur sur $notifiable du dessus)
            Les tables étant compléter par le dossier Seed justement.

            2/En smtp, je n’ai pas voulu mettre un smtp existant mais juste mettre: MAIL_DRIVER=log dans le .env et du coup le mail est envoyé dans storage/logs/laravel.log et commenter les autres clefs MAIL_XXX…
            Et du coup, juste après avoir valider une nouvelle inscription, j’arrive directement sur la page d’accueil, sans message pour vérifier la boite mail.
            J’ai bien reçu le ‘mail’ dans laravel.log, je fais un clic sur le lien du mail et j’arrive sur la page d’accueil en ayant accès du coup au profil.
            Est-ce que tout est normal ?

            3/J’ai voulu faire un reverse engineering sous MySQL Workbench, cela ne marche pas car il ne comprend pas le JSON: « ERROR: (100, 13) « json » is not valid at this position, expecting : BIT, BOOL, BOOLEAN, DATETIME, DATE, ENUM, … »

            Merci pour l’aide

          • bestmomo

            21 août 2019 à 21 h 25 min

            Salut,
            Je te réponds de mémoire parce que je n’ai plus trop en tête ce projet.
            1) Comme une nouvelle inscription est notifiée à l’administrateur, si les tables ne sont pas remplies il n’y en a pas et on a une erreur.
            2) Je crois que je n’ai pas prévu de vérification des emails.

  • MisterL

    21 novembre 2018 à 8 h 29 min

    Salut,
    j’ai une erreur dans ma nav-bar, avec les dropdown, avec cette erreur :
    [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (bootstrap.js.map, line 0)

    Cette erreur est intervenue juste après supprimer le fichier resources/js/bootstrap.js

    Il doit y avoir une erreur en quelque part ? Sauf si le problème vient de mon coté ?

Laisser un commentaire