Contrôleurs CodeIgniter, routage des vues : apprenez avec un exemple d'application

Dans ce didacticiel, vous allez apprendre les sujets suivants.

Routage – le routage est chargé de répondre aux requêtes URL. Le routage fait correspondre l'URL aux itinéraires prédéfinis. Si aucune correspondance d'itinéraire n'est trouvée, CodeIgniter lève une exception de page introuvable.
surchargés – les itinéraires sont liés aux contrôleurs. Les contrôleurs collent les modèles et les vues ensemble. La demande de données/logique métier du modèle et renvoie les résultats dans la présentation de la vue. Une fois qu'une URL correspond à une route, elle est transmise à la fonction publique d'un contrôleur. Cette fonction interagit avec la source de données, la logique métier et renvoie la vue qui affiche les résultats.
Vues – les vues sont responsables de la présentation. Une vue est généralement une combinaison de HTML, CSS et JavaScript. Il s'agit de la partie chargée d'afficher la page Web à l'utilisateur. En règle générale, les données affichées sont extraites de la base de données ou de toute autre source de données disponible.

Comment créer un nouveau projet CodeIgniter

Nous utiliserons Composer pour créer un nouveau projet. J'utiliserai le serveur PHP intégré, il n'est donc pas nécessaire d'avoir des logiciels supplémentaires tels que Apache. Dans ce tutoriel, nous utilisons le Windows système opérateur. Par conséquent, nous avons créé un dossier Sites sur le lecteur C. Vous pouvez utiliser n'importe quel répertoire qui vous convient.

Ouvrez la ligne de commande/le terminal et exécutez la commande suivante

cd C:\Sites

Nous allons maintenant créer un projet CodeIgniter à l'aide de Composer. Exécutez la commande suivante

composer create-project CodeIgniter/framework ci-app

ICI,

La commande ci-dessus crée un nouveau projet CodeIgniter version 3 en utilisant la dernière version stable, c'est-à-dire 3.1.9 dans un répertoire ci-app.

Une fois l'exécution de la commande ci-dessus terminée, vous devriez pouvoir obtenir des résultats similaires à ceux suivants dans le terminal

Exécutez la commande suivante pour accéder au répertoire de projet ci-app nouvellement créé

cd ci-app

Démarrons maintenant le serveur Web intégré PHP

 php -S localhost:3000

ICI,

La commande ci-dessus démarre le serveur PHP intégré exécuté sur le port 3000.

Ouvrez le navigateur Web et parcourez l'URL suivante : http://localhost:3000/

Vous obtiendrez la page suivante

Si vous pouvez voir la page ci-dessus, alors félicitations, vous avez installé avec succès CodeIgniter.

Comme vous pouvez le lire sur la page Web ci-dessus, la page affichée ci-dessus est rendue par la vue située dans application/views/welcome_message.php et le contrôleur responsable se trouve dans application/controllers/Welcome.php.

Routage CodeIgniter

Pour l'instant, notre application ne possède qu'une seule URL qui est la page d'accueil. Dans cette section, nous personnaliserons la section d'accueil. Nous allons créer de nouvelles URL qui répondront aux différentes requêtes.

Commençons par l'itinéraire de la page d'accueil

Ouvrez le fichier de routes comme indiqué par le chemin ci-dessous

application/config/routes.php

Vous devriez pouvoir voir le contenu suivant

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

ICI,

$route['default_controller'] = 'bienvenue'; définit le contrôleur par défaut qui répond aux requêtes URI
$route['404_override'] = »; cette route vous permet de définir une route personnalisée pour les erreurs 404. Une erreur 404 se produit lorsqu'une page est introuvable. CodeIgniter a un gestionnaire par défaut pour l'erreur mais vous pouvez définir le vôtre si vous le souhaitez.
$route['translate_uri_dashes'] = FAUX ; cette option vous permet de traduire les tirets en traits de soulignement. Nous parlerons de cette option lorsque nous examinerons le fonctionnement des routes dans CodeIgniter.

Regardons maintenant la méthode du contrôleur chargée d'afficher la page d'accueil que nous avons vue lorsque nous avons ouvert l'URL http://localhost:3000/ dans le navigateur Web.

Ouvrez le fichier suivant

application/controllers/Welcome.php

Vous devriez pouvoir voir le code suivant

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {

	public function index()
	{
		$this->load->view('welcome_message');
	}
}

ICI,

Defined ('BASEPATH') OR exit('Aucun accès direct au script autorisé'); protège contre l'accès direct à la classe du contrôleur sans passer par le fichier index.php. N'oubliez pas que dans le paradigme MVC, toutes les requêtes ont un seul point d'entrée, et pour CodeIgniter, son index.php. Ce code bloque toutes les requêtes qui ne transitent pas par index.php
class Welcome extends CI_Controller {…} définit une classe Welcome qui étend la classe parent CI_Controller
public function index() définit une fonction publique appelée par défaut lorsque vous ouvrez la page d'accueil
$this->load->view('welcome_message'); cette ligne charge la vue Welcome_message. Le fichier Welcome_message se trouve dans le répertoire application/views/welcome_message.php

Jusqu'à présent, nous n'avons exploré que ce qui sort de la boîte avec CodeIgniter, essayons maintenant d'apporter quelques modifications. Nous allons créer notre page d'accueil et remplacer la page par défaut

Créez un nouveau fichier dans application/views/home.php

Ajoutez le code suivant à home.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello CodeIgniter!</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    </head>
    <body>
        <section class="section">
            <div class="container">
                <h1 class="title">
                    CodeIgniter Hello World
                </h1>
            </div>
        </section>
    </body>
</html>

ICI,

Le code HTML ci-dessus charge le framework Burma SSS et la police du réseau CDN pour créer un document HTML très basique. Il applique une règle CSS très simple du framework CSS de Birmanie.

Ouvrez l'URL suivante dans votre navigateur : http://localhost:3000/

Vous devriez pouvoir voir ce qui suit

Super, nous venons de modifier avec succès la page d'accueil. Continuons, définissons notre itinéraire. Supposons que notre application doive également pouvoir afficher la page À propos de nous.

Créer un itinéraire

Ouvrez le fichier de routes application/config.routes.php

Ajoutez l'itinéraire suivant

$route['about-us'] = 'welcome/about_us';

ICI,

Lorsqu'un visiteur visite l'URL /about-us, nous demandons à CodeIgniter de rechercher un contrôleur Welcome et d'exécuter la méthode about_us.

Créer un contrôleur

Définissons maintenant la méthode du contrôleur qui nous concerne

Ouvrez application/controllers/Welcome.php

Ajoutez la méthode suivante

public function about_us(){
            $this->load->view('about_us');
        }

ICI,

Le code ci-dessus définit une fonction about_us et charge une vue about_us.

Créer une vue

Créons maintenant la vue que nous venons de référencer dans la section ci-dessus

Créez un nouveau fichier about_us.php dans application/views/about_us.php

Ajoutez le code suivant

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>About CodeIgniter!</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    </head>
    <body>
        <section class="section">
            <div class="container">
                <h1 class="title">
                    About us yap...                
                </h1>
            </div>
        </section>
    </body>
</html>

Nous sommes prêts à partir, ouvrez l’URL suivante dans votre navigateur Web : http://localhost:3000/index.php/about-us

Vous verrez la page suivante

Si vous parvenez à voir la page ci-dessus, félicitations, vous avez réussi à créer une application simple dans CodeIgniter.

Résumé

Dans ce didacticiel, nous avons couvert trois (3) composants principaux qui composent une application CodeIgniter. Nous avons examiné les routes et comment les définir, les contrôleurs et comment créer des méthodes qui répondent aux demandes de route et créé des vues simples qui sont renvoyées aux utilisateurs lorsqu'ils demandent une ressource.

Tu pourrais aimer: