I. Introduction▲
L'écriture de cet article m'a paru nécessaire, car n'ayant aucune formation en informatique à part une initiation au Basic, je ne savais pas comment m'y prendre pour créer une application Web simple.
Cela faisait suite à un problème auquel, un jour, je me suis confronté. Je devais développer une application qui puisse fonctionner à la fois sur plusieurs postes et surtout qu'elle soit gratuite. En passant un peu de temps sur Internet, je découvris qu'il était possible de le faire par des applications de type Web. Et « cerise sur le gâteau », tous les outils étaient gratuits, que ce soit les programmes à installer sur un poste (Apache, PHP et MySQL), ou les outils permettant de faire le développement. L'accessibilité par les autres postes était des plus simples, car il ne nécessitait l'installation d'aucun programme sur les autres postes, puisqu'avec juste un navigateur Internet cela fonctionnait.
II. Installation de l'environnement de travail▲
L'environnement que je vais choisir est un environnement Apache, PHP et MySQL fonctionnant sous Windows.
Il existe deux façons d'installer l'environnement de travail. La première est d'installer chaque élément sur le poste de travail. Mais dans cet article, je vais plutôt partir sur une installation « tout en un ».
Les solutions « tout en un » sont nombreuses, quelques-unes sont visibles sur le lien suivant :
https://php.developpez.com/telecharger/index/categorie/210/Outils-pour-PHP : nginx, EasyPHP, MAMP, WAMP Server, XAMPP et Zend Server
Et il en existe d'autres, en voici quelques-unes :
- fvpat Webdev Server (fvpatwds) : https://sourceforge.net/projects/fvpatwds/ ;
- VertrigoServ : https://www.vswamp.com/ ;
- Mov'Amp : https://www.clubic.com/telecharger-fiche32659-mov-amp.html ;
Quasiment toutes ces applications sont portables avec chacune ses caractéristiques et son lot d'applications qui va avec. Mov'Amp est une vieille version, l'avantage de cette version est qu'elle ne fait que ~24 Mo une fois décompressée, elle peut être utilisée pour faire des applications simples et sur des clefs de faible contenance.
Dans mon cas, je vais utiliser EasyPHP, la dernière version est la 12.1 :

L'installation nécessite ~180 Mo d'espace disque.
Lancer le programme :

Une fois l'application ouverte, l'on aperçoit dans la barre des tâches l'icône suivante :
Un clic droit sur l'icône permet de voir toutes les commandes :

Explorer : ouvrira le répertoire qui contiendra tous les fichiers de nos pages Web.
Administration : ouvrira une page Web contenant tous les paramétrages, c'est par ce lien que l'on ira travailler sur la base de données.
Web local : ouvrira la page Web du site que nous aurons créé.
III. Construction de la base de données▲
III-A. Concevoir la base de données▲
Pour concevoir une base de données correcte, il faut au préalable savoir ce que l'on en attend. Pour cela rien de mieux que de faire un schéma de ce que l'on souhaite faire et obtenir.
Dans mon exemple, je vais prendre le cas de la gestion d'une bibliothèque scolaire pour des élèves de CP.
Les contraintes peuvent être d'ordre technique et fonctionnel :
- Technique : de quoi ai-je besoin pour que le site Web fonctionne comme je le souhaite, tout en respectant une certaine logique, etc. ;
- Fonctionnel : par qui va-t-elle être utilisée ? Quels sont les besoins qui me sont réellement nécessaires ? Etc.
Il faut pour cela bien questionner le demandeur et bien lui faire reformuler sa demande.
Voici une liste non exhaustive des besoins qui m'ont été demandés :
Question |
Type |
Besoin |
Contraintes |
Qui devra utiliser l'application ? |
F |
La maîtresse. |
|
Les enfants. |
En arrivant au CP les enfants ne savent pas lire, il faudra prévoir quelque chose pour qu'ils y arrivent : peut-être avec des images par exemple. |
||
De quelles fonctionnalités j'aurai besoin ? |
F |
Saisir un emprunt de livre. |
Tous. |
Saisir un retour de livre. |
Tous. |
||
Pouvoir récupérer la liste des livres qui sont empruntés. |
Maîtresse. |
||
Pouvoir récupérer la liste des livres qu'un élève aura empruntés. |
|||
Saisir un nouveau livre. |
|||
Saisir un nouvel élève. |
|||
Pouvoir récupérer la liste des élèves pour un livre donné. |
|||
Quelle info sur l'élève ? |
T |
Prénom, Nom (car il peut y avoir deux prénoms identiques) et dans mon cas l'image de l'enfant (car certains sont fâchés avec leur prénom). |
|
Quelle info sur le livre ? |
T |
Titre, image. |
Dans mon cas, je vais aussi prévoir des dates d'emprunt et de retour, car certains livres sont empruntés à la bibliothèque municipale. |
Quelle info sur l'emprunt ? |
T |
Élève, livre, date d'emprunt, date prévue de retour, date de retour. |
Et suivant les besoins de chacun, il est possible de rajouter d'autres critères ou d'autres tables…
Donc voici après analyse à quoi pourraient ressembler les différentes tables :
Dans les tables : élève et livre, je crée un index avec numérotation automatique, et je récupérerai ces index dans la table des emprunts. Je rajoute aussi le fait que certains champs ne pourront pas être nuls.
Exemple de la table livre :

III-B. Création de la base de données▲
Pour créer la base de données, je vais lancer PHPMyAdmin :

Sur la page Web qui apparaît, il faudra cliquer sur PHPMyAdmin :

Ensuite, on arrive sur le programme lui-même :
Pour créer la base de données, il y a deux possibilités :
- soit manuellement, en créant la base et les différentes tables qui la composent ;
- soit en important les données qui sont contenues dans un fichier, c'est cette opération que nous allons effectuer (je fournirai les fichiers nécessaires).
III-B-1. Manuellement▲
Dans certaines applications, les tables suivantes existent, il ne faut surtout pas les supprimer :
« information_schema » et « mysql ».
Pour créer les tables manuellement, il faut commencer par créer la base :
Il faut saisir le nom de la base de données, dans l'emplacement réservé « Créer une base ».

Une fois que la base est créée, il suffit de créer les différentes tables, pour cela il faut le nom de la table et le nombre de colonnes…
III-B-2. Importer un fichier▲
Dans ce cas, cliquer sur « Importer » et l'écran suivant apparaît :
Sélectionner « Emplacement du fichier texte » et cliquer sur « Parcourir ».
Télécharger le fichier « creation_table.sql », et ensuite cliquer sur « Exécuter », le masque suivant apparaîtra :
On voit sur la gauche que les trois tables ont été créées.
Faire la même opération avec le fichier « donnees_table.sql », ensuite il suffit de cliquer sur la table « bibli_eleve » ou « bibli_livre » pour voir que les données ont été insérées dans la table.
IV. Construction de l'application Web▲
IV-A. Introduction▲
Comme nous l'avons vu dans les détails des contraintes, l'application va se scinder en deux parties :
- une partie qui servira à tout le monde (élèves et maîtresse) pour emprunter et rendre un livre ;
- une autre qui servira à la maîtresse pour faire le suivi des emprunts, etc.
Pour obtenir cela, nous allons mettre sur la racine du site la partie commune à tous et on va créer un répertoire qui contiendra le complément pour la maîtresse. Nous nommerons ce répertoire « maitresse » (éviter de mettre des accents, des espaces, etc.).
Cela donne le résultat suivant :

Avant de nous lancer dans la construction des pages du site, nous allons définir ce qui devra apparaître sur celles-ci en commençant par la partie commune, nous ferons la partie « maitresse » sur le même principe.
IV-B. Que doit-on voir sur la première page ?▲
Le titre |
Qui est généralement le nom de l'application |
Les différentes commandes |
Dans notre cas, nous aurons besoin de commandes pour la gestion des emprunts (« Emprunt » et « Retour » des livres) et d'une commande qui nous permettra de revenir au départ. |
Donc la première page (page d'accueil) pourrait avoir la forme suivante :

IV-C. Schématisation de la gestion des emprunts▲
V. Construction de la page d'accueil▲
V-A. Avant de commencer▲
Je vais vous expliquer comment j'ai procédé pour créer l'application Web. Elle n'est certes pas la meilleure, mais elle fonctionne correctement et elle ne fait pas appel à de grandes notions.
Il y a deux types de technologies que nous allons utiliser :
- Statique : basé sur HTML (mise en forme de la structure de la page) et CSS (mise en forme de la page) ;
- Dynamique : basé sur PHP (communique avec le serveur et qui permet de faire un échange avec ce serveur).
Je vais créer deux types de fichiers, un fichier « style.css » (feuille de style : qui me permettra par la suite de modifier tout le site d'un seul coup) et des fichiers *.php (je vais éviter de créer des fichiers *.html pour garder une certaine clarté).
Avant de commencer, je vais aussi créer différents répertoires pour une meilleure clarté : un répertoire « images » (qui contiendra toutes les images du site), un répertoire « eleve » (qui contiendra les photos des élèves) et un répertoire « livre » (qui contiendra les images des livres). Et on peut en créer autant que l'on veut suivant les besoins.
Maintenant sous la racine du site j'ai quatre répertoires : maitresse, images, eleve et livre.
V-B. Les balises▲
La construction d'une page Web passe obligatoirement par l'utilisation de balises. Les balises par paire : ont une balise qui ouvre « <balise…> » et une autre qui ferme « </balise> ». Les balises seules : elles s'ouvrent et se ferment dans la même commande « <balise … /> ».
Et voici les principales que je vais utiliser dans les pages que je vais créer :
<html> « 1re ligne. dernière ligne » </html> : englobera toute la page, on l'ouvre à la première ligne et on la ferme à la dernière ;
<head> « différentes informations » </head> : contient des éléments sur différentes informations ;
<title> « nom de ma page Web » </titre> : permet de donner un nom à la page Web, c'est le nom qui apparaîtra dans le navigateur ;
<meta /> : contient des informations sur la page ;
<link /> : permet d'indiquer au navigateur que l'on appelle une autre ressource (par exemple les feuilles de style) ;
<body> « corps de la page » </body> : permet de délimiter le contenu de la page ;
<?php…?> : est identique à la balise html mais c'est un autre langage. La différence « en gros » est que html est utilisé pour des sites statiques et php est utilisé pour des sites dynamiques ;
<table> « tableau » </table> : permet d'insérer un tableau ;
<tr> « colonne » </tr> : permet d'insérer une ligne dans un tableau ;
<td> « ligne » </td> : permet d'insérer une colonne dans un tableau ;
<img « image » /> : permet d'insérer une image ;
<a /> : permet d'associer une action (peut être utilisé avec du texte ou une image) ;
<div> </div> : permet d'ajouter un bloc nous l'utiliserons associé avec la feuille de style.
V-C. La structure de la page d'accueil▲
Comme nous l'avons déjà vu, la « page d'accueil » aura la forme suivante, et elle se nommera « index.php » (la première page doit toujours s'appeler « default » ou « index ») :

Titre : que je nommerai Bandeau contiendra le titre de l'application (sous forme d'image), le retour à la page d'accueil (sous forme d'image) et je vais aussi rajouter la date du jour.
Commandes : que je nommerai Contenu contiendra tout le reste de l'application de l'emprunt au retour des livres.
Dans mon cas, je ne vais travailler qu'avec la page « index.php », donc la partie Contenu contiendra tour à tour les différentes pages. Nous verrons plus loin comment cela est possible.
Pour faire tenir ensemble le bandeau et le contenu, je vais travailler avec les feuilles de style.
Je crée donc une feuille de style que je nomme « styles.css » :
div {
text-align:
left
;
vertical-align:
top
;
}
div#bandeau
{
width:
1050
px;
height:
94
px;
background:
url(
'images/bandeau.png'
)
top
left
no-repeat
;
text-align:
right
;
vertical-align:
bottom
;
font:
10
px verdana,
sans-serif
,
"Times New Roman"
;
color:
White
;
}
div#contenu
{
float:
left
;
width:
1050
px;
}
Et je crée ensuite la page « index.php », qui ressemblera à ceci dans un premier temps :
...
<
html>
<
head>
<
meta http-
equiv=
"
Content-Type
"
content=
"
text/html; charset=iso-8859-1
"
/>
<
link rel=
"
stylesheet
"
type=
"
text/css
"
href=
"
styles.css
"
/>
<
title>
Bibliothèque</
title>
</
head>
<
body>
<!--
Création d'
un tableau pour positionner le corps au milieu de la page -->
<table border="0" cellpadding="0" cellspacing="0" >
<tr width="100%" align="center">
<!-- Création de la marge de gauche -->
<td width="20%">
</td>
<!-- Création du contenu de la page -->
<td align="center">
<!-- Introduction de l
'
heure dans le bandeau -->
<
div id=
"
bandeau
"
>
<?php
echo "Le "
.
jourdate_fr(date('Y-m-d-w'
));
?>
<
br>&
nbsp;<
br>
<
a href=
"
?
"
><
img border=
"
0
"
src=
"
images/accueil.png
"
></
a>&
nbsp;
</
div>
<!--
Corps de la page -->
<
div id=
"
contenu
"
>
...
</
div>
</
td>
<!--
Création de la marge de droite-->
<
td width=
"
20%
"
>
</
td>
</
tr>
</
table>
</
body>
</
html>
Dans le bandeau, j'insère la date à l'aide d'une fonction, on verra l'utilisation des fonctions plus tard.
V-D. La page « index.php »▲
V-D-1. Structure et fonctionnement▲
Comme je l'ai dit précédemment, je ne vais travailler qu'avec la page « index.php ». Ce qui implique que je vais devoir tout mettre dans la page, mais dans mon cas pour en faciliter la compréhension, je ferai différentes pages que j'insérerai dans la page, je vais pour cela utiliser la commande PHP « include ».
Si l'on reprend le schéma d'emprunt et retour de livre, il va nous falloir les pages suivantes :
Commande |
Besoin |
Page |
Accueil |
Une page qui contiendra les boutons : Emprunt et Retour. |
accueil.php |
Emprunt |
Une page pour lister les élèves. |
eleve1.php |
Une page pour lister les livres. |
livre1.php |
|
Une page pour indiquer que l'emprunt est fait. |
emprunt1.php |
|
Retour |
Une page pour lister les élèves. |
eleve2.php |
Une page pour lister les livres. |
livre2.php |
|
Une page pour indiquer que le retour a été fait. |
retour2.php |
Nous allons aussi travailler avec des variables, je vais utiliser la fonction GET pour cela, elle permet de faire passer les variables d'une page à l'autre dans la barre d'adresse, les variables seront précédées du terme « $ » (exemple : $var).
Besoin |
Variable |
Nom de l'élève. |
$el |
Titre du livre. |
$li |
Choix pour indiquer si je suis sur l'emprunt ou le retour. |
$id |
Pour tester l'existence des variables, je vais utiliser la fonction suivante :
Pour inclure les différentes pages, je vais utiliser la fonction suivante :
V-D-2. Les autres pages▲
Les différents fichiers contiennent toutes les informations nécessaires pour comprendre la création des différentes pages.
VI. Autres fichiers utiles▲
VI-A. Connexion à la base de données▲
Dans la construction d'un site dynamique, on interagit avec des bases de données, je vais créer un fichier « connection.php » qui contiendra les paramètres de connexion à la base de données.
VI-B. Les fonctions▲
Je vais aussi créer un fichier « fonction.php » qui contiendra différentes fonctions. Une fonction est une suite d'actions dont le résultat est une donnée. En général, on crée des fonctions quand on sait que l'on s'en servira plus tard ou dans plusieurs pages. Dans notre cas, je vais surtout créer des fonctions sur le formatage des dates pour les faire apparaître en français.
Exemple de fonction donnant la date sous la forme suivante 18/05/2011 :
function date_fr($val_date
) {
list($annee
,
$mois
,
$jour
) =
explode('
-
'
,
$val_date
);
$datefr
=
$jour
.
'
/
'
.
$mois
.
'
/
'
.
$annee
;
return $datefr
;
}
La première ligne est la valeur qui est envoyée à la fonction, la deuxième décompose la date (ici elle est au format anglais : aaaa-mm-jj), la troisième met la date au format français, et la quatrième renvoie la date modifiée.
VII. Répertoire de la « Maîtresse »▲
Cette partie sera construite de la même façon que l'autre. Il va donc falloir les pages suivantes en plus de la page « index.php » :
Commande |
Besoin |
Page |
Accueil |
Une page qui contiendra toutes les commandes. |
accueil.php |
Liste des livres empruntés par la classe |
Une page pour lister les emprunts. |
admin1.php |
Liste des livres empruntés par un élève |
Une page pour lister les élèves. |
eleve2.php |
Une page pour lister les livres empruntés par l'élève. |
admin2.php |
|
Liste des élèves qui ont emprunté un livre |
Une page pour lister les livres. |
livre3.php |
Une page pour lister les élèves qui ont emprunté par le livre. |
admin3.php |
|
Liste des livres qui ne sont pas à l'école |
Une page pour lister les livres qui ne sont pas à l'école. |
admin4.php |
Ajouter un élève |
Une page pour saisir les informations nécessaires. |
eleve10.php |
Une page pour indiquer que l'enregistrement a été fait. |
admin10.php |
|
Supprimer un élève |
Une page pour lister les élèves. |
eleve11.php |
Une page pour indiquer que la suppression a été faite. |
admin11.php |
|
Ajouter un livre |
Une page pour saisir les informations nécessaires. |
livre12.php |
Une page pour indiquer que l'enregistrement a été fait. |
admin12.php |
|
Supprimer un livre |
Une page pour lister les livres. |
eleve13.php |
Une page pour indiquer que la suppression a été faite. |
admin13.php |
Nous allons utiliser les mêmes variables :
Besoin |
Variable |
Nom de l'élève |
$el |
Titre du livre |
$li |
Choix pour indiquer sur quelle commande je suis |
$id |
Pour ce qui est des images, je me servirai des images précédentes.
VIII. Application Web▲
Voici le fichier zip contenant toute l'application : Première application Web
IX. Remerciements▲
Pour leurs remarques directes ou indirectes et conseils avisés : Djug, snake264, ovh, x-zolezzi , Bovino, nickylarson et FaridM.
Et pour la correction orthographique et syntaxique : jacques_jean et Claude Leloup.