Créer une application avec Laravel 5.5 – Installation et style

image_pdfimage_print

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 articles ont été mis à jour pour la version définitive de Bootstrap 4.

L’installation

Pour installer Laravel c’est tout simple :

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

Si tout se passe bien vous devez avoir ces dossiers :

Et cet aspect :

Pour compléter on va aussi installer l’authentification :

cd album
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=album
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 un 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

Voilà, comme ça on va pouvoir utiliser mix. On a un fichier de configuration à la racine :

Avec ce code :

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

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

On a les assets ici :

Par défaut on utilise Bootstrap 3 dans sa version sass avec des variables modifiées par le fichier _variables.scss. D’autre part pour le Javascript on utilise aussi Bootstrap 3 évidemment et aussi Vue.js.

Pour notre application on va plutôt passer à Bootstrap 4 qui est maintenant en version définitive. Pour le Javascript on va se contenter de JQuery parce qu’on a pas trop de travail côté client. En résumé on va faire un peu le ménage :

On va utiliser la version CSS de Bootstrap parce qu’on va très peu la modifier en se contentant de quelques surcharges (en plus la version sass n’est pas très stable).

On va donc télécharger Bootstrap 4 :

Pour le Javascript on va aussi récupérer JQuery :

Vous copiez tout ça ici :

Ensuite on modifie le fichier webpack.mix.js :

mix.styles([ 
    'resources/assets/css/bootstrap.css' 
], 'public/css/app.css') 
.scripts([ 
    'resources/assets/js/jquery-3.3.1.js', 
    'resources/assets/js/bootstrap.bundle.js' 
], 'public/js/app.js');

Le fichier bootstrap.bundle.js contient la librairie popper.js utile pour certains plugins de Bootstrap.

Et on lance mix :

npm run dev

On se retrouve avec tout ça rassemblé dans le dossier public :

Bon évidemment on a mis un peu le bordel dans les vues :

On va arranger tout ça maintenant…

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 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>
    $(function() {
        $('#logout').click(function(e) {
            e.preventDefault();
            $('#logout-form').submit()
        })
    })
</script>
</body>
</html>

C’est une adaptation pour Bootstrap 4, 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.

La barre est belle mais pour les formulaires c’est pas encore gagné :

Ce qui est logique puisqu’ils sont prévus pour Bootstrap 3. Il faudra s’en occuper, on verra ça dans le prochain chapitre.

Un peu de CSS

Pour le moment on va continuer un peu notre stylisation. Pour ça on va ajouter un fichier CSS pour nos surcharges :

Et évidemment on l’ajoute dans webpack.mix.css :

mix.styles([ 
    'resources/assets/css/bootstrap.css',
    'resources/assets/css/app.css' 
], 'public/css/app.css') 
.scripts([ 
    'resources/assets/js/jquery-3.3.1.js', 
    'resources/assets/js/bootstrap.bundle.js' 
], 'public/js/app.js');

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
body {
    background-color: #343a40;
    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. On perd des textes à cause de la couleur mais on s’en occupera bientôt.

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 et ResetPasswordController.

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 pour l’adapter à Bootstrap 4 et au multi-langue
  • 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.

 

12 commentaires sur “Créer une application avec Laravel 5.5 – Installation et style

  1. Bonsoir bestmomo,

    Je me suis servi de ce modèle pour créer ma propre application… enfin juste la page d’accueil pour l’instant. 🙂
    J’ai un problème de positionnement du panel d’accueil avec le texte « Bienvenue! ». Je n’arrive pas à le déplacer sur la droite; il reste invariablement bloqué à gauche quelque soit les offset que je lui indique.

    Bienvenue!

    @if (session(‘status’))

    {{ session(‘status’) }}

    @endif

    {{ Auth::user()->name }} You are logged in!

    Je n’utilise pas les cdn et j’ai utilisé mix avec cette configuration
    mix.styles([
    ‘resources/assets/css/bootstrap.min.css’,
    ‘resources/assets/css/app.css’
    ], ‘public/css/app.css’)
    .scripts([
    ‘resources/assets/js/jquery-3.3.1.slim.min.js’,
    ‘resources/assets/js/bootstrap.bundle.min.js’
    ], ‘public/js/app.js’);

    Il y a surement quelque chose que j’ai raté mais je ne vois pas où.
    cordialement,

  2. J’ai remarqué une erreur à cet endroit :

    « Ensuite on modifie le fichier webpack.mix.js :

    mix.styles([
    ‘resources/assets/css/bootstrap.css’
    ], ‘public/css/app.css’)
    .scripts([
    ‘resources/assets/js/jquery-3.2.1.js’,
    ‘resources/assets/js/popper.js’,
    ‘resources/assets/js/bootstrap.js’
    ], ‘public/js/app.js’); »

    il manquerais la ligne  » let mix = require(‘laravel-mix’); « 

Laisser un commentaire