Définir des routes et afficher des vues dans Laravel peut sembler complexe pour les débutants.
Une mauvaise configuration peut entraîner des erreurs d’affichage ou des difficultés à maintenir le code.
Cet article vous guide à travers chaque étape pour configurer correctement vos routes et vues dans Laravel.
Initiez-vous à Laravel et réalisez votre première application en toute confiance.
Configurer Routes Laravel dans web.php
Le fichier web.php est situé dans le dossier routes et sert à définir les routes de votre application. Chaque route indique à Laravel quelle page afficher lorsqu’un utilisateur accède à une URL spécifique.
- Chemin du fichier :routes/web.php
- Code à ajouter :
Route::get('/test', function () {
return view('test.index');
});
Voici explication :
- Route ::get(‘/test’, …) : Définit une route de type GET pour l’URL /test.
- function () { return view(‘test.index’); } :Cette fonction anonyme renvoie la vue test.index lorsqu’un utilisateur accède à /test. Laravel recherche ce fichier dans resources/views/test/index.blade.php.
Créer Vue Laravel avec index.blade.php
Les vues dans Laravel sont généralement des fichiers .blade.php situés dans le dossier resources/views. Ces fichiers utilisent le moteur de template Blade pour faciliter l’écriture du HTML et inclure des éléments dynamiques.
- Créez un dossier nommé test dans resources/views.
- Ajoutez le fichier index.blade.php dans ce dossier pour structurer les vues par section ou fonctionnalité.
Voici le chemin complet du fichier : resources/views/test/index.blade.php
Contenu Vue dans index.blade.php
Collez le code HTML suivant dans index.blade.php pour tester l’affichage de la vue :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-bcfffedd-e1f1-4e59-ae62-770710090fdc: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-bcfffedd-e1f1-4e59-ae62-770710090fdc: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"bcfffedd-e1f1-4e59-ae62-770710090fdc","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>Mon titre</h1>
<p> Mon paragraphe de test </p>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"9acae7584d","url":"https:\/\/blog.alphorm.com\/configurer-routes-vues-laravel","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Tester Routes sur Serveur Laravel
Ouvrez un terminal et lancez le serveur de développement Laravel avec :
php artisan server
Cette commande démarre le serveur à l’adresse http://127.0.0.1:8000 (ou http://localhost:8000 ).
Tester la route
- Ouvrez un navigateur et accédez à http ://127.0.0.1:8000/test.
- Vous devriez voir une page affichante :
Résumé des Routes et Vues Laravel
En conclue pour configurer et afficher une vue dans Laravel, voici les étapes essentielles résumées et détaillées pour mieux comprendre chaque action.
- Définir une route dans web.php pour renvoyer une vue.
- Créer le fichier de vue dans resources/views.
- Ajouter le contenu HTML dans le fichier de vue.
- Tester l’affichage dans le navigateur.
Ces étapes vous permettent d’afficher une vue simple avec Laravel, en utilisant les bonnes pratiques pour structurer et gérer vos fichiers de vue.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment définir une route dans Laravel?
Comment créer un fichier de vue dans Laravel?
Comment tester une route Laravel?
Comment organiser les vues dans Laravel?
Pourquoi utiliser Blade pour les vues?
Conclusion
En suivant ces étapes pour configurer les routes et vues dans Laravel, vous facilitez le développement de votre application. Quel élément des vues Laravel aimeriez-vous approfondir?
