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 les vues de 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 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.
Vous pouvez utiliser le code HTML, CSS et JavaScript de votre choix pour vos vues. Ceci n'est qu'un exemple.
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 :
<!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="{{ asset('favicon.ico') }}" />
<link rel="apple-touch-icon" href="{{ 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="{{ 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="{{ 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">
© 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>
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 :
Dans le code de votre vue, le chemin pour retrouver un de ces fichiers sera retrouvé à l'aide de la fonction d'aide asset() placée entre double-accolades.
Ex :
<img src="{{ asset('medias/fr/Logo.png') }}" alt="Mon entreprise Inc." title="Mon entreprise Inc.">
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.
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.
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;
}
« Views ». Laravel. https://laravel.com/docs/master/views
« Blade Templates ». Laravel. https://laravel.com/docs/master/blade
▼Publicité
