Tutoriel Laravel 9 #5 : Créer une page d’accueil

2 août, 2021

Table des matières Masquer

1 Modifier le contrôleur IndexController

Laravel est un framework très puissant qui suit la structure MVC. Il est conçu pour les développeurs Web qui ont besoin d’une boîte à outils simple, élégante et puissante pour créer un site Web complet. Ce tutoriel explique l’utilisation de base du framework Laravel en construisant un système de blog simple. Dans cet article, nous allons commencer par créer un nouveau projet.

Modifier le contrôleur IndexController

class IndexController extends Controller
{
    public function index()
    {
        $site_settings = [
            'title' => setting('site.title'),
            'description' => setting('site.description')
        ];

        return view('home', [
            'site_settings' => $site_settings
        ]);
    }
}

Tout d’abord, nous avons créer un tableau contenant le titre et la description du site par l’intermédiaire de la méthode settings qui fait appel aux variables de configuration de Voyager, puis nous l’envoyons à notre vue « home ».

Routeur

Dans web.php, assurez-vous d’avoir la route suivante afin d’appeler notre page d’accueil, nous allons par la suite créer plusieurs routes vers notre contrôleurs pour appeler différentes méthodes autres la fonction index :

Route::get('/', [IndexController::class, 'index']);

Création d'une page d'accueil

Pour améliorer l’apparence de notre site, nous allons utiliser Bootstrap. Je suppose que vous êtes déjà familiarisé avec CSS et HTML, nous allons créer un template blade home.blade.php :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>{{$site_settings['title']}}</title>

    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
          integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body style="padding-top: 5rem;">
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="{{\Illuminate\Support\Facades\Storage::url($website['logo'])}}" style="max-height: 50px">
            {{$site_settings['title']}}
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
                aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">Accueil</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Lien</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

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

    <div style="padding: 3rem 1.5rem;">
        <h1>Accueil</h1>
        <p>{{$site_settings['description']}}</p>
    </div>

</main>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"></script>
</body>
</html>

La vue est également assez simple. Une syntaxe différente, {{$website->website_title}}, que j’ai utilisée dans la version précédente de ce tutoriel, va également fonctionner ici.

Une autre chose qui mérite d’être mentionnée se trouve à la ligne 19. C’est ainsi que nous pouvons afficher une image téléchargée par l’utilisateur. Les détails sur le stockage des fichiers sont ici : https://laravel.com/docs/8.x/filesystem#file-urls

Ouvrez votre navigateur et allez sur http://localhost:8000/

Dans les deux prochains articles, nous allons construire les composants de base de notre projet. En commençant par la création de modèles et la mise en place du panneau d’administration