Création d'une WebApp (part03)

Comprenons tout d'abord comment fonctionne CodeIgniter, je vous invite pour cela à lire la documentation, en anglais certes mais très bien faite.
CodeIgniter fonctionne sur le principe du MVC (Model, View, Controller).
Le model va s'occuper de communiquer avec la base de données, et, au sens large, des données.
Le controller va faire le lien entre le model et la vue.
La vue, sera le résultat final, l'affichage donc de notre page web.
Dans le navigateur, nous verrons essentiellement le nom des controllers, ainsi que des variables éventuellement.

Le fichier "welcome_message.php" est assez simple, et se compose de trois parties.
La première ligne est du php, reconnaissable par sa syntaxe <?php ... ?>
Le reste est de l'html standard, avec une grosse partie de css visible entre les balises <style></style>

Découpage de la page

Lorsqu'on construit un site web,nous devons toujours garder à l'idée de répéter le moins possible le même code. C'est pour cela que nous allons découper notre fichier en plusieurs parties.
en php, il existe les fonctions include(), ou include_once() ainsi que require() ou require_once()
Comme nous sommes dans CodeIgniter, nous allons simplement utiliser la fonction inclue avec pour charger une vue.
il s'agit donc de $this->load->view('');
Nous allons séparer l'en-tête de notre fichier, la feuille de style, le contenu, et la fin du fichier. C'est une approche classique de découpage, vous pourrez par la suite faire comme bon vous semble.
Nous allons placer tous ces fichiers, à l'exception du contenu, dans un sous-dossier "inc" (comme incorpore). Je mets souvent les noms en anglais, ce qui permet d'en prendre l'habitude si un jour vous devez travailler par exemple à plusieurs, ou sur un projet multilingues.

J'ai aussi pris l'habitude de nommer mes fichiers de vue en mettant un suffixe "_v", par exemple header_v.php cela permet de s'y retrouver plus facilement dans nos multiples fichiers ouverts ("_m" pour les models, et concernant le controller, il faut impérativement commencer par une Majuscule, et le controller étant visible dans l'url du site, on ne doit pas mettre de suffixe.

Par mesure de sécurité, tous les fichiers dans CodeIgniter commencent par <?php defined('BASEPATH') OR exit('No direct script access allowed'); ?> Cela permet d'interdire l'affichage seul de ce fichier sans passer par un controller.

Nous aurons donc dans notre dossier "mon_projet/application/views/inc" :

footer_v.php
header_v.php
scripts_v.php
styles_v.php

J'ai rajouté un fichier "scripts_v.php" pour inclure nos scripts (en bas de page pour afficher plus rapidement la page.
Le fichier "header_v.php" contiendra tout ce qu'il y a avant la balise "body", on va d'ailleurs l'inclure aussi. Dans ce fichier nous allons inclure aussi la feuille de style de la même manière.
Pour inclure tous ces fichiers dans notre page principale "welcome_message.php", nous allons donc utiliser la syntaxe suivante : <?php $this->load->view('inc/header_v'); ?>
Notre fichier "welcome_message.php" ressemblera donc à ça :
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?><br /> <?php $this->load->view('inc/header_v'); ?><br /> <div id="container"><br /> <h1>Welcome to CodeIgniter!</h1><br /> <div id="body"><br /> <p>The page you are looking at is being generated dynamically by CodeIgniter.</p><br /> <p>If you would like to edit this page you'll find it located at:</p><br /> <code>application/views/welcome_message.php</code><br /> <p>The corresponding controller for this page is found at:</p><br /> <code>application/controllers/Welcome.php</code><br /> <p>If you are exploring CodeIgniter for the very first time, you should start by reading the <a href="user_guide/">User Guide</a>.</p><br /> </div><br /> <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds. <?php echo (ENVIRONMENT === 'development') ? 'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?></p><br /> </div><br /> <?php $this->load->view('inc/footer_v'); ?><br />


L'utilisation de CodeIgniter est focalisé sur le controller, il est la base de notre WebApp, on part de lui pour aller chercher les données, et c'est lui qui va appeler ensuite la vue pour afficher le résultat.

Si on regarde le controller par défaut dans le fichier "mon_projet/Applcation/controllers/Welcome.php" on voit une structure fort simple, et c'est là la force de ce framework (je n'ai pas mis la 1ère ligne, ni le commentaire) :
<?php<br /> class Welcome extends CI_Controller {<br /> public function index() {<br /> $this->load->view('welcome_message');<br /> }<br /> }<br />
la fonction "index" se charge donc d'afficher le fichier "welcome_message", et c'est tout !

Séparer le document à afficher de la structure de notre site

Ceci est en fait une sorte d'embryon de template 😜
Pour ce faire, nous allons utiliser une variable et la transmettre à tous nos fichiers utilisés pour afficher le résultat.

Toujours dans notre controller, nous allons réécrire la fonction "index" comme suit :
<?php<br /> public function index() {<br /> $this->data = array();<br /> $this->data['view_file'] = 'welcome_v';<br /> $this->load->view('my_template', $this->data);<br /> }<br />
On rajoute un tableau "$this->data" qui va contenir nos variables. Ici, j'ai créé dedans une valeur 'view_file' dont nous allons voir comment l'utiliser ensuite.

J'ai renommé aussi mon fichier "welcome_message" par "my_template". On va supprimer dans ce fichier le contenu brut de notre page et le placer dans un nouveau fichier "welcome_v.php".

Le contenu de notre fichier "my_template.php" va ressembler à ça :
<?php $this->load->view('inc/header_v'); ?> <br /> <div id="container"><br /> <?php $this->load->view($view_file); ?><br /> </div><br /> <?php $this->load->view('inc/footer_v'); ?><br />

La variable $this->data['view_file'] que nous avons créé dans notre controller sera utilisée dans nos vues en mettant simplement $view_file super pratique une fois qu'on a pris le coup !

Si nous avons d'autres controllers, ou d'autres fonctions dans un même controller, nous sommes maintenant prêt à afficher uniquement ce qui nous intéresse sans nous occuper du reste !

Ajouter Bootstrap et jquery

Pour terminer cette partie, nous allons ajouter bootstrap et jquery, nous nous focaliserons ensuite sur notre fichier "welcome_v.php" pour quelques rappels de PHP.
Tout d'abord, et nous aurions pu le faire dès le début, nous allons modifier deux-trois choses à notre projet.
Dans notre dossier "mon_projet", nous devons avoir un dossier "application", puis dedans un dossier "config" et enfin un fichier "config.php" que nous ouvrons.
Nous allons changer les deux premières variables comme suit :
$config['base_url'] = 'http://localhost/mon_projet';
et $config['index_page'] = '';.
Ensuite nous ouvrons dans le dossier "application/config" le fichier "autoload.php" et nous allons utiliser un module dit "helper" pour l'utilisation des url.
$autoload['helper'] = array('url');
On enregistre nos deux fichiers et on passe à nos styles et scripts !

Pour cela, nous allons ouvrir nos deux fichiers "styles_v.php" et "scripts_v.php" situés dans le dossier "inc" de notre dossier "views".
De la même manière que précédemment, nous allons indiquer les fichiers nécessaires pour implémenter jQuery et Bootstrap (et d'autres par la suite).
Commençons par le fichier de styles, ajoutons tout en haut (donc on va dire la deuxième ligne, car nous aurons TOUJOURS la 1ere ligne contenant notre code php pour éviter les failles de sécurité).
<link href="<?php echo site_url('assets/bootstrap/css/bootstrap.min.css'); ?>" rel="stylesheet" media="all" />
La fonction site_url() qui fait partie du helper "url" de CodeIgniter permet d'obtenir l'adresse "web" de notre projet. Il s'agit de la variable $config['base_url'] que nous avons renseigné plus haut. Nous aurions pu utiliser la fonction base_url() mais celle-ci pose quelques petits soucis dans l'utilisation d'une webapp, surtout en utilisant les fonctions avancées sur smartphones (j'en parlerai plus tard).

Nous ouvrons maintenant notre fichier "scripts_v.php" et nous allons ajouter nos deux fichiers.
Nous plaçons toujours les scripts (assez lourds en général) en fin de chargement, donc en bas de notre page.
Comme les scripts de Bootstrap utilisent jQuery, nous devons charger celui-ci en premier.
<script type="text/javascript" src="<?php echo site_url('assets/jquery/js/jquery-3.4.1.min.js'); ?>"></script><br /> <script type="text/javascript" src="<?php echo site_url('assets/bootstrap/js/bootstrap.min.js'); ?>"></script><br /> <script type="text/javascript"><br /> // mon futur code ici...<br /> </script>

On enregistre nos deux fichiers et voilà !
Bon, là, on ne voit pas grand chose, mais on va changer tout ça dans la prochaine partie 😊

Création d'une WebApp (part04)