Création d'une WebApp (part02)

Précisions

Je ne vais pas ici reprendre le principe du html et du css, je vous renvoi donc sur la toile ou différents site et vidéos vous présenterons cela mieux que moi.

Concernant PHP, je vais ici rappeler quelques principes, mais là aussi il existe plein d'autres sites spécialisés sur ce langage, et, finalement c'est aussi sa force.

Pour un usage courant d'un projet web, et avec l'utilisation de framework comme codeigniter, nous aurons finalement pas besoin de beaucoup de connaissance en php.
l'essentiel sera l'utilisation des fonction function(), des tableaux array() des boucles foreach() et des conditions if, else
Bien sûr, nous serons aussi amené à utiliser d'autre fonctions, mais cela restera occasionnel.

Concernant le framework CSS Bootstrap, il faut juste user et abuser des classes fournies.

Bien sûr, l'avantage de Bootstrap, tout comme php, CodeIgniter et jQuery par la suite, le principal attrait de ces outils sont sans aucun doute leurs documentation !
Alors n'hésitez pas à les consulter, usez et abusez 😊 !

Installation des fichiers

Rentrons dans le vif du sujet !
Nous allons installer CodeIgniter, en version 3.1.11, la version 4.0.2 vient tout juste de sortir, et au vue du nombre conséquent de changements, je n'ai pas encore eu le temps de m'y pencher dessus, ce sera peut-être l'occasion d'un article séparé ☺️

Téléchargez CodeIgniter 3.1.11
(prenez bien le bon lien sur la page).
Téléchargez jQuery 3.4.1
Il nous reste Bootstrap :
Téléchargez BootStrap

Nous allons installer tout ça à la racine de notre site, dans un dossier que nous allons appeler par exemple "mon_projet", vous pouvez mettre ce que vous voulez comme nom, mais attention à respecter le nommage internet (pas d'accent, pas d'espace, éviter les majuscules, etc.

Dans notre dossier "mon_projet", nous allons créer un dossier "assets" qui contiendra essentiellement les modules additionnels. J'ai pris l'habitude de les structurer toujours de la même manière, nous verrons surement cela plus tard. N'oubliez pas de supprimer tout autre fichiers ou dossiers dans votre dossier de projet.

Dans l'archive décompactée de CodeIgniter, nous aurons besoins de deux dossiers et un fichier, mais vous pouvez tout prendre (au passage, notez que vous avez l'aide en entier 😊 )

Nous aurons donc besoin du dossier "system", "application" et du fichier "index.php".

On va donc se retrouver à la racine de notre site avec :

htdocs/
__mon_projet/
_____application/
_____assets/
_____index.php
_____system/


Vous pouvez déjà consulter dans votre navigateur la page par défaut de codeigniter à l'adresse suivante :
http://localhost/mon_projet
Nous allons maintenant ajouter les modules dans notre dossier assets
Pour cela, je structure toujours mes modules en séparant le javascript et le css ainsi que les img. Ce n'est pas une obligation mais cela me permet de les appeler en php plus simplement à l'aide d'une fonction.
Nous allons ajouter Bootstrap et jQuery, nous verrons par la suite peut-être d'autres modules comme font-awesome par exemple, mais nous en reparlerons.

Le dossier "assets" devrait ressembler à cela :

assets/
__ bootstrap/
_____ css/
_____ js/
__ jquery/
_____ js/
________ jquery-3.4.1.min.js

Bien sûr les dossiers js et css de bootstrap contiennent les éléments ☺️
Tout est en place, mais bien sûr, pour le moment, ces fichiers ne sont pas utilisés.

Vous pouvez déjà ouvrir avec votre éditeur de texte le fichier situé dans : /htdocs/mon_projet/application/views/welcome_message.php
Ce fichier contient la page par défaut, nous allons dans la prochaine partie tenter de comprendre et personaliser tout ça !

---

Création d'une WebApp (part03)