Articles récents

  • Gabarit de base pour les vues (app.blade.php, @yield, @extends, @section, @parent)

    Laravel offre un mécanisme pour optimiser le code de nos vues : les gabarits. En anglais, on les appelle « layouts ».

    Le squelette des pages Web sera défini dans un fichier, nommé gabarit de base. Il s'agira généralement du fichier resources\views\layouts\app.blade.php.

    Le contenu propre à une page sera défini dans une vue qui hérite du gabarit de base.

    (suite…)
  • Recette de nectar pour attirer les colibris

    À l'approche du mois de mai, au Québec, il est temps de se préparer à accueillir le retour des colibris à gorge rubis.

    Ces petits oiseaux-mouches sont extraordinaires. Leurs ailes battent si vite que lorsqu'ils passent près de vous, vous entendez un brombissement étonnant.

    Si vous entretenez des mangeoires à colibris, vous pourrez les observer d'assez près. Les miennes sont à quelques pieds de ma table de patio, accrochées aux branches d'un chêne. Les colibris viennent nous visiter à répétition sur l'heure du souper.

    (suite…)
  • Aligner correctement une grille de divisions de hauteurs variables sous Bootstrap

    Dans certaines situations, il peut être souhaitable d'afficher un nombre indéterminé d'items côte-à-côte dans une page Web. Afin d'obtenir le visuel désiré, il est intéressant d'entourer chaque item par une division. Ces divisions seront affichées l'une à côté de l'autre jusqu'à ce que toute la largeur de la page soit remplie. La division suivante sera affichée une ligne plus bas. Pour que les divisions soient affichées côte-à-côte, il faut qu'on leur applique une règle CSS float.

    En raison de ce float, il peut être difficile d'aligner correctement les items lorsque la hauteur des divisions contenant chacun des items est variable.

    Je vous présente dans cet article une technique pour bien aligner les items d'une grille à hauteur variable.

    (suite…)
  • Création d’une vue avec Laravel

    Sous Laravel, pour afficher correctement une page Web dans le navigateur, il faut utiliser une vue. C'est la vue qui est en charge de générer le code HTML. Elle utilisera pour cela, en plus des balises HTML, des directives et instructions que le moteur d'affichage Blade met à sa disposition.

    Contrairement aux modèles et aux contrôleurs, il n'y a pas de commande artisan, livrée avec Laravel, permettant de créer le squelette d'une vue. Notez qu'il est possible de créer vos propres commandes artisan pour générer un squelette répondant à vos besoins mais ceci dépasse le sujet du présent article.

    Les vues sous Laravel sont placées dans le dossier resources\views.

    Les bonnes pratiques veulent qu'on crée un sous-dossier pour chacun des contrôleurs. Le nom du sous-dossier correspondra à la première partie du nom du contrôleur, tout en minuscules (ex : pour les vues utilisées par ProduitsController : resources\views\produits).

    Le nom de la vue, quant à lui, correspondra généralement au nom de la méthode d'action à laquelle la vue est associée et se terminera par .blade.php (ex : index.blade.php, create.blade.php, edit.blade.php).

    Une première vue

    Une fois que vous avez créé une route et un contrôleur, vous êtes prêts à créer une première vue.

    Pour l'instant, la vue n'affichera qu'un texte statique à propos des produits que vous avez à vendre. Éventuellement, elle pourra afficher des listes ou tableaux à partir des données lues dans la base de données, des formulaires pour modifier ces données, etc.

    Le code présenté ici permettra de créer une vue assez minimaliste mais tout de même professionnelle :

    Visuel d'une première vue minimaliste

    D'abord, créez un dossier nommé produits sous ressources\views.

    Dans ce dossier, créez le fichier index.blade.php et copiez-y le code suivant :

    Vue Laravel (Blade)

    <!DOCTYPE html>

    <html lang="fr-CA">

    <head>

        <title>Produits à vendre chez Mon Entreprise Inc.</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta name="description" content="Trouvez le meilleur produit répondre à votre besoin de ..." />

        <meta name="author" content="Christiane Lagacé : http://christianelagace.com">

        <link rel="icon" href="{{ URL::asset('favicon.ico') }}" />

        <link rel="apple-touch-icon" href="{{ URL::asset('apple-touch-icon.png') }}" />

        <meta name="robots" content="noodp" />

     

        <!-- Latest compiled and minified CSS (code from http://getbootstrap.com/getting-started/) -->

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

     

        <!-- Optional theme (code from http://getbootstrap.com/getting-started/) -->

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

     

        <!-- Theme for jQuery UI -->

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

     

        <!-- Feuille de style propres site Web -->

        <link rel="stylesheet" href="{{ URL::asset('css/messtyles.css') }}">

    </head>

    <body>

     

        {{-- ******************************************************************************************** --}}

        {{-- menu --}}

        {{-- ******************************************************************************************** --}}

     

        <nav id="menuprincipal" class="navbar navbar-default navbar-fixed-top">

            <div class="container">

                <div class="navbar-header">

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">

                        <span class="sr-only">Menu</span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                    </button>

                </div>            

                <div id="navbar" class="collapse navbar-collapse">

                    <ul class="nav navbar-nav">                

                        <li class="active"><a href="#">Accueil</a></li>

                        <li class="dropdown">

                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">menu 1 <span class="caret"></span></a>

                            <ul class="dropdown-menu">

                                <li><a href="#">sous-menu 1a</a></li>

                                <li><a href="#">sous-menu 1b</a></li>

                                <li><a href="#">sous-menu 1c</a></li>

                            </ul>

                        </li>                

                        <li class="dropdown">

                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">menu 2 <span class="caret"></span></a>

                            <ul class="dropdown-menu">

                                <li><a href="#">sous-menu 2a</a></li>

                                <li><a href="#">sous-menu 2b</a></li>

                                <li><a href="#">sous-menu 2c</a></li>

                            </ul>

                        </li>

                        <li><a href="#">menu 3</a></li>

                    </ul>

                </div>

            </div>

        </nav>    

        <div id="contenu">

     

            {{-- ******************************************************************************************** --}}

            {{-- entête --}}

            {{-- ******************************************************************************************** --}}

     

            <header class="container" role="main">

                <div class="logo">

                    <a href="#">

                        <img src="{{ URL::asset('medias/fr/Logo.png') }}" alt="Mon entreprise Inc." title="Mon entreprise Inc.">

                    </a>

                    <div class="souslogo">Projet de test - données fictives</div>

                </div>

            </header>

                

            {{-- ******************************************************************************************** --}}

            {{-- contenu principal --}}

            {{-- ******************************************************************************************** --}}

     

            <div id="principal" class="container">

                <h1>Nos produits</h1>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean felis sapien, faucibus in congue eu, consequat eu nibh. Quisque sit amet felis feugiat, adipiscing lorem sit amet, blandit tortor.</p>

                <p>Suspendisse vitae aliquam dolor, eu ultrices magna. Aenean dignissim nulla vitae hendrerit mattis. Morbi magna ipsum, malesuada in tempus quis, rutrum quis velit. Donec scelerisque scelerisque sapien 

    sit amet venenatis. Sed tristique turpis sapien, at volutpat est vulputate a.</p>

            </div>

        </div>    <!-- /contenu -->

     

        {{-- ******************************************************************************************** --}}

        {{-- pied de page --}}

        {{-- ******************************************************************************************** --}}

     

        <footer id="piedpage" class="container navbar navbar-default navbar-fixed-bottom">

            <div class="text-center">

            <div class="copy">

                 &copy; Votre Nom {{ date('Y') }}

                <br /><br />Ce site est un projet de test réalisé à partir d'un tutoriel sur <a href="http://christianelagace.com">christianelagace.com</a>.

                <br />Toutes les données présentées sur ce site sont fictives.

            </div>

            </div>

        </footer>

     

        {{-- ******************************************************************************************** --}}

        {{-- scripts --}}

        {{-- ******************************************************************************************** --}}

     

        <!-- jQuery (hash généré sur https://www.srihash.org/) -->

        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>

        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha384-Dziy8F2VlJQLMShA6FHWNul/veM9bCkRUaLqr199K94ntO5QUrLJBEbYegdSkkqX" crossorigin="anonymous"></script>

     

        <!-- Latest compiled and minified JavaScript (code from http://getbootstrap.com/getting-started/) -->

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

     

    </body>

    </html>

    Où placer les images, les feuilles de style et les scripts ?

    Laravel vous permet de travailler efficacement avec les différents fichiers qui accompagnent l'application, comme les images, les feuilles de style et les scripts, grâce à Laravel Mix (avant Laravel5.4, on utilisait plutôt Elixir). Mais avant de vous lancer dans l'apprentissage de cet outil, il est possible de travailler simplement avec vos fichiers comme vous le faisiez auparavant. L'apprentissage de Laravel Mix pourra se faire plus tard.

    Puisque la racine du site Web est le dossier public de votre projet, les fichiers qui doivent être lus par le navigateurs seront placés dans un sous-dossier de public :

    • les images seront placées dans le sous-dossier medias, qui contiendra à son tour les sous-dossiers en, fr et commun;
    • les feuilles de style seront placées dans le sous-dossier css;
    • les scripts, quant à eux, seront placés dans le sous-dossier js.

    Pour terminer le rendu de votre vue, vous devez placer votre logo dans le dossier à cet effet. Vous pouvez utiliser celui-ci à titre d'exemple ou encore le vrai logo de votre entreprise.

    Logo

    Vous devez ensuite copier la feuille de style suivante à l'endroit prévu. Libre à vous d'y apporter les modifications de votre choix pour répondre à vos besoins.

    CSS

    body {

        margin: 0;

        padding: 0;

        color: black;

        font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;

        padding-top: 70px;

    }

     

    p {

        text-align: justify;

    }

     

    /* ************************************************************************** */

    /* *** entête *************************************************************** */

    /* ************************************************************************** */

    header {

        min-height: 90px;

    }

     

    header a, header a:hover, header a:visited {

        text-decoration: none;

        color: black;

    }

     

    header h1 {

        font-size: 3em;

    }

     

    .souslogo {

        margin-top: 10px;

        font-size: 0.8em;

        color: #92B54C;    /* vert olive */

    }

     

    /* ************************************************************************** */

    /* *** contenu ************************************************************** */

    /* ************************************************************************** */

    #contenu {

        min-height: 700px;

    }

     

    /* ************************************************************************** */

    /* *** contenu principal **************************************************** */

    /* ************************************************************************** */

    #principal h1 {

        font-size: 2em;

    }

     

    #principal h2 {

        font-size: 1.5em;

    }

     

    /* ************************************************************************** */

    /* *** pied de page ********************************************************* */

    /* ************************************************************************** */

    #piedpage {

        background-image: none;

        border: none;

        padding: 15px;

        color: #777;

    }

    Afficher la vue à l'aide du contrôleur

    Laravel s'attend à ce que les vues soient placées dans le dossier resources\views et portent un nom se terminant par .blade.php. Il est donc inutile de spécifier ces informations. Cependant, il faudra indiquer dans quel sous-dossier (ici : produits) la vue est placée ainsi que son nom (ici : index).

    Remplacez donc le code de la méthode index, dans le contrôleur ProduitsController, par le code suivant.

    Remarquez que dans l'entête de la méthode, le type de la valeur de retour a été ajusté pour indiquer ce que la méthode retourne vraiment.

    Contrôleur Laravel (PHP)

    /**

     * Affiche la liste des produits.

     *

     * @return \Illuminate\View\View

     */

    public function index()

    {

        return View('produits.index');

    }

    Tester le tout

    Après avoir copié les fichiers requis dans les dossiers prévus et avoir, au besoin, ajusté le code HTML et CSS pour bien y référer, lancez votre application en entrant l'URL qui correspond à votre méthode d'action :

    URL

    http://monprojet.app/produits

    Pour plus d'information

    « Views ». Laravel. https://laravel.com/docs/master/views

    « Blade Templates ». Laravel. https://laravel.com/docs/master/blade

  • Route avec paramètres sous Laravel, avec ou sans le route model binding

    Plusieurs méthodes d'action ont besoin de recevoir un ou plusieurs paramètres pour leur indiquer ce sur quoi elles doivent travailler. Par exemple, lorsqu'une méthode d'action doit afficher les détails d'un enregistrement, elle recevra généralement l'identifiant de cet enregistrement en paramètre.

    Dans cet article, je vous montre le cheminement de l'information passée en paramètre à partir d'une vue qui présente un lien qui mène à une route qui mène à un contrôleur qui mène à une autre vue. Le tout, avec ou sans le route model binding. Suivez-moi bien !

    (suite…)
  • Les routes avec Laravel

    Lorsqu'on affiche une page Web Laravel dans le navigateur, l'URL ne se terminera pas par le nom d'un fichier .html ni .php. Plutôt, il s'agira d'une suite de mots ressemblant à des dossiers et sous-dossiers, comme par exemple http://mondomaine.com/produits/creation.

    Laravel fera le lien entre cette suite de mots et une méthode d'action définie dans un contrôleur. Ceci sera réalisé grâce à un système de routage configuré dans Laravel.

    (suite…)
  • Qu’est-ce que MVC ? – un exemple concret avec Laravel

    MVC est un patron de conception permettant de séparer une application Web en différentes couches : le Modèle, la Vue et le Contrôleur.

    De nombreux cadres d'application utilisent le patron MVC. Laravel est l'un de ceux-là. Les exemples suivants, utilisés pour illustrer les couches du modèle MVC, sont tirés d'une application Laravel.

    (suite…)
  • Configurer PhpStorm pour Laravel (Laravel Plugin)

    PhpStorm est tout à fait adapté pour programmer efficacement un site Laravel. En plus des fonctionnalités qu'il offre pour PHP comme la complétion de code, Ctrl+Clic pour atteindre une définition, un débogueur efficace, la possibilité d'interagir directement avec la base de données et ses nombreux raccourcis clavier, il est possible de lui ajouter des fonctionnalités spécifiquement pour Laravel, par exemple la reconnaissance des façades, la complétion de code pour les routes, Ctrl+Clic pour atteindre une vue.

    (suite…)
  • Création d’un projet Laravel dans PhpStorm avec Homestead

    La programmation Laravel ne requiert pas l'utilisation d'un IDE (Integreted Development Environment). Un simple éditeur de texte ferait l'affaire. Cependant, si vous utilisez un IDE spécialisé comme PhpStorm, vous bénéficierez de fonctionnalités incroyables qui faciliteront votre travail de façon significative.

    Parmi mes fonctionnalités favorites dans PhpStorm, il y a le débogueur, les live templates, le multi-curseur, la possibilité d'interagir avec la base de données, les raccourcis-claviers qui nous rendent plus efficaces, et plusieurs autres.

    Avant de commencer à travailler avec PhpStorm, vous devez créer votre projet Laravel créé avec composer create-project. Ensuite, vous pouvez procéder à la création d'un projet dans PhpStorm.

    (suite…)