IncludeBeer

Création d'une application web de base avec CodeIgniter 4 (1ère partie)

Publié le 15 novembre 2020 Dernière mise à jour le 16 novembre 2020
Image de l'article
Origine de l'image: Bram Naus

Créer une application web avec CodeIgniter 4 est vraiment simple. Dans cette séries d'articles je met l'emphase sur le code PHP et non sur l'installation de CI, ni sur le look des pages web. Si ce n'est pas déjà fait, commencez par installer CodeIgniter. Vous pouvez l'installer sur un serveur de test ou sur votre ordinateur personnel. Dans les exemples de cet article, j'utilise MAMP (Apache, MySQL et PHP sur macOS) avec un serveur virtuel http://ci4.test:8888 qui pointe vers le répertoire /Applications/MAMP/htdocs/ci4.test/public.

Pour commencer, j'ai installé les fichiers de traduction française dans le répertoire /Applications/MAMP/htdocs/ci4.test/app/Language/fr, j'ai configuré le minimum pour cette application et j'ai supprimé les fichiers d'exemple :

app/Config/App.php

// Définir l'URL du site web
public $baseURL = 'http://ci4.test:8888';

// Définir la page d'index vide pour ne pas avoir index.php dans l'URL
public $indexPage = '';

// Définir la langue par défaut
public $defaultLocale = 'fr';

// Définir la liste des langues prises en charge par l'application
public $supportedLocales = ['fr'];

// Définir le fuseau horaire
public $appTimezone = 'America/Toronto';

app/Config/Logger.php

// Définir le niveau de log au maximum pour aider à déboguer
public $threshold = 9;

app/Config/Routes.php

// Définir le controleur par défaut
$routes->setDefaultController('RecettesController');

// Désactiver l'AutoRoute
$routes->setAutoRoute(false);

// Définir la route '/'
$routes->get('/', 'RecettesController::index');

Supprimer la page "welcome"

cd /Applications/MAMP/htdocs/ci4.test
rm app/Controllers/Home.php
rm app/Views/welcome_message.php

Modèle, vue et contrôleur

Tout comme CodeIgniter 3, la version 4 suit toujours le pattern MVC (Model-View-Controller). Le contrôleur étant le point d'entrée des requêtes HTTP. Le modèle étant la source de données (généralement une base de données MySQL). Et la vue étant le document HTML final retourné au navigateur. Donc pour cet exemple très simple d'un site de recettes, voici à quoi ressemble chacun de ces fichiers. À ce point-ci, on n'a pas encore défini de base de données, alors on n'as pas de fichier pour le modèle. On a seulement un contrôleur et une vue pour afficher les données bidons :

app/Controllers/RecettesController.php

<?php namespace App\Controllers;

class RecettesController extends BaseController
{
    public function index()
    {
        // Rassembler toutes les données utilisées par la vue dans un tableau $data
        $data = [
            'titre_page' => "Mes recettes",
            'sous_titre_page' => "Je vous présente mes recettes favorites...",
            'recettes' => $this->_donnees_bidon(),
        ];

        /* Chacun des items du tableau $data sera accessible dans la vue
         * par des variables portant le même nom que la clé :
         * $titre_page, $sous_titre_page et $recettes
         */
        return view('liste_recettes', $data);
    }

    /**
     * Données bidon en attendant de créer le modèle et la base de données.
     */
    private function _donnees_bidon ()
    {
        return [
            [
                'titre' => "Eau bouillante",
                'ingredients' => ["Eau fraîche"],
                'instructions' => "Mettre l'eau dans un chaudron et faire bouillir."
            ],
            [
                'titre' => "Thé",
                'ingredients' => ["Eau fraîche", "Poche de thé"],
                'instructions' => "Préparez la recette d'eau bouillante. Mettre l'eau dans une tasse, ajoutez la poche de thé et laissez infuser quelques minutes."
            ],
            [
                'titre' => "Verre d'eau",
                'ingredients' => ["Eau fraîche", "Glaçons", "Tranche de citron (facultatif)"],
                'instructions' => "Mettre des glaçons dans un grand verre et remplir d'eau. Ajoutez une tranche de citron si désiré."
            ],
        ];
    }
}

app/Views/liste_recettes.php

<?php
/**
 * @var string $titre_page       Le titre de la page (créée automatiquement par CI via le tableau $data)
 * @var string $sous_titre_page  Le sous-titre de la page (créée automatiquement par CI via le tableau $data)
 * @var array  $recettes         Liste des recettes (créée automatiquement par CI via le tableau $data)
 * @var array  $recette          Une recette (créée par l'instruction foreach)
 * @var string $ingredient       Un ingrédient (créée par l'instruction foreach)
 */
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<title><?= esc($titre_page) ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous">

<style type="text/css">
.titre
{
    padding: 3rem 1.5rem;
}

article
{
    padding: 1.5rem 1.5rem;
}
</style>

</head>

<body>

<main role="main" class="container">
    <div class="titre">
        <h1>
            <?= esc($titre_page) ?>
            <small class="text-muted"><?= esc($sous_titre_page) ?></small>
        </h1>
    </div>

    <div class="container">

<?php foreach ($recettes as $recette): ?>
        <article>
            <h3><?= esc($recette['titre']) ?></h3>
            <h5>Ingrédients</h5>
            <ul>
            <?php foreach ($recette['ingredients'] as $ingredient): ?>
                <li><?= esc($ingredient) ?></li>
            <?php endforeach; ?>
            </ul>
            <h5>Préparation</h5>
            <p><?= esc($recette['instructions']) ?></p>
        </article>
        <hr>
<?php endforeach; ?>

    </div>

</main>

<footer>
    <p class="text-center">&copy; 2020 Mon site de recettes</p>
</footer>

</body>
</html>

Première partie terminée !

Vous pouvez maintenant aller à la page http://ci4.test:8888 qui affichera les trois recettes, dont ma célèbre recette d'eau bouillante ! Évidemment ce n'est qu'un exemple très simpliste. Dans une vraie application les recettes devraient être dans une base de données. C'est ce que nous allons faire dès maintenant dans la deuxième partie.