Appli Web

Créer sa première Application Web
Par Vincent Viale
Date de publication : 30 mai 2011
Dernière mise à jour : 21 mars 2013
Nous allons créer notre première application Web, sur le langage PHP avec une base de
données MySQL.
Cette application sera créée pour mes propres besoins, donc il peut y avoir des variantes,
des solutions plus optimales, etc. mais pour ma part, je vais vous montrer les grands
principes, à chacun par la suite de faire évoluer cette application en fonction de ses besoins
et de ses connaissances.
Vous pouvez commenter l'article en suivant le lien suivant : Commentez, alors après votre
lecture, n'hésitez pas.
Créer sa première Application Web par Vincent Viale
I - Introduction..............................................................................................................................................................3
II - Installation de l'environnement de travail.............................................................................................................. 3
III - Construction de la base de données....................................................................................................................8
III-A - Concevoir la base de données....................................................................................................................8
III-B - Création de la base de données............................................................................................................... 10
III-B-1 - Manuellement.................................................................................................................................... 11
III-B-2 - Importer un fichier............................................................................................................................. 12
IV - Construction de l'application Web...................................................................................................................... 13
IV-A - Introduction................................................................................................................................................ 13
IV-B - Que doit-on voir sur la première page ?................................................................................................... 14
IV-C - Schématisation de la gestion des emprunts............................................................................................. 14
V - Construction de la page d'accueil....................................................................................................................... 15
V-A - Avant de commencer..................................................................................................................................15
V-B - Les balises..................................................................................................................................................16
V-C - La structure de la page d'accueil............................................................................................................... 16
V-D - La page « index.php »................................................................................................................................18
V-D-1 - Structure et fonctionnement...............................................................................................................18
V-D-2 - Les autres pages............................................................................................................................... 19
VI - Autres fichiers utiles........................................................................................................................................... 19
VI-A - Connexion à la base de données............................................................................................................. 19
VI-B - Les fonctions..............................................................................................................................................19
VII - Répertoire de la « Maîtresse ».......................................................................................................................... 19
VIII - Application Web................................................................................................................................................ 20
IX - Remerciements................................................................................................................................................... 20
-2-
Le contenu de cet article est rédigé par Vincent VIALE et est mis à disposition selon les termes de la Licence
Creative Commons Attribution - Pas d'Utilisation Commerciale - Pas de Modification 3.0 non transposé. Les logos
Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright ® 2013 Developpez.com.
http://vviale.developpez.com/tutoriels/appli-web/
I - Introduction
L'écriture de cet article m'a paru nécessaire, car n'ayant aucune formation en informatique à par 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, puisque qu'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 :
http://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) : http://sourceforge.net/projects/fvpatwds/ ;

• VertrigoServ : http://vertrigo.sourceforge.net/ ;
• Mov'Amp : http://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 quelle 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 :
-3-
-4-
-5-
-6-
Une fois l'application ouverte, l'on aperçoit dans la barre de tâche l'icône suivante :
Un clic droit sur l'icône permet de voir toutes les commandes :
-7-
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 fonctionnelle :
• Technique : de quoi j'ai besoin pour que le site Web fonctionne comme je le souhaite, tout en respectant une
certaine logique, etc.
• Fonctionnelle : 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 F La maîtresse.
l'application ? Les enfants. En arrivant au CP les enfants
ne savent pas lire, il faudra
prévoir quelque chose
pour qu'ils y arrivent : peut-
-8-
être avec des images par

exemple.
De quelles F Saisir un emprunt de livre. Tous.
fonctionnalités Saisir un retour de livre. Tous.
j'aurai besoin ? Pouvoir récupérer la liste des Maîtresse.
livres qui sont empruntés.
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 T Prénom, Nom (car il peut y avoir
l'élève ? 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 T Titre, image. Dans mon cas, je vais aussi
livre ? prévoir des dates d'emprunt
et de retour car certains
livres sont empruntés à la
bibliothèque municipale.
Et je vais aussi rajouter un
état (emprunté, disponible et
indisponible).
Quelle info sur T Élève, livre, date d'emprunt, date
l'emprunt ? 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 pourrait ressembler les différentes tables :
-9-
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 nul.
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 :
- 10 -
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 :
- 11 -
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 champ…
III-B-2 - Importer un fichier
Dans ce cas, cliquer sur « Importer » et l'écran suivant apparaît :
- 12 -
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 :
- 13 -
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 pas 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
Maintenant nous allons décrire les différentes étapes qui composent l'emprunt d'un livre ou le retour d'un livre, voici
le résultat :
- 14 -
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és 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é).
- 15 -
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 styles)
<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 associer 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 ») :
- 16 -
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 styles.
Je crée donc une feuille de styles que je nomme « styles.css » :
styles.css
div {
text-align: left;
vertical-align: top;
}
div#bandeau {
width: 1050px;
height: 94px;
background: url('images/bandeau.png') top left no-repeat;
text-align: right;
vertical-align: bottom;
font: 10px verdana, sans-serif, "Times New Roman";
color: White;
}
div#contenu {
float:left;
width:1050px;
}
Et je crée ensuite la page « index.php », qui ressemblera à ceci dans un premier temps :
index.php
...
<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>

<table border="0" cellpadding="0" cellspacing="0" >
<tr width="100%" align="center">

<td width="20%">
</td>

- 17 -
index.php
<td align="center">

<div id="bandeau">
<?php echo "Le ".jourdate_fr(date('Y-m-d-w'));?>
<br> <br>
<a href="?"><img border="0" src="images/accueil.png"></a>
</div>

<div id="contenu">
...
</div>
</td>

<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 accueil.php
Retour.
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
La valeur 1 sera pour l'emprunt et la valeur 2 pour le retour.
Pour tester l'existence des variables je vais utiliser la fonction suivante :
code.php
if (empty($_GET['id'])) {
$id = 0;
} else {
- 18 -
code.php
$id = $_GET['id'];
}
Pour inclure les différentes pages je vais utiliser la fonction suivante :
code.php
switch($id) {
case 0:
include 'page1.php';
break;
case 1:
break;
default:
break;
}
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 fais 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.php
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 » :
- 19 -
Commande Besoin Page

Accueil Une page qui contiendra toutes les accueil.php
commandes.
Liste des livres empruntés Une page pour lister les emprunts. admin1.php
par la classe
Liste des livres empruntés Une page pour lister les élèves. eleve2.php
par un élève Une page pour lister les livres admin2.php
empruntés par l'élève.
Liste des élèves qui ont Une page pour lister les livres. livre3.php
emprunté un livre Une page pour lister les élèves qui ont admin3.php
emprunté par le livre.
Liste des livres qui ne sont Une page pour lister les livres qui ne admin4.php
pas à l'école sont pas à l'école.
Ajouter un élève Une page pour saisir les informations eleve10.php
nécessaires.
Une page pour indiquer que admin10.php
l'enregistrement a été fait.
Supprimer un élève Une page pour lister les élèves. eleve11.php
Une page pour indiquer que la admin11.php
suppression a été faite.
Ajouter un livre Une page pour saisir les informations livre12.php
nécessaires.
Une page pour indiquer que admin12.php
l'enregistrement a été fait.
Supprimer un livre Une page pour lister les livres. eleve13.php
Une page pour indiquer que la admin13.php
suppression a été faite.
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.
- 20 -

Appli Web

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Appli Web

Transféré par

Droits d'auteur :

Formats disponibles

Créer sa première Application Web

Par Vincent Viale

Date de publication : 30 mai 2011

Dernière mise à jour : 21 mars 2013

II - Installation de l'environnement de travail

http://php.developpez.com/telecharger/index/categorie/210/Outils-pour-PHP : nginx, EasyPHP, MAMP, WAMP

Et il en existe d'autres, en voici quelques-unes :

• fvpat Webdev Server (fvpatwds) : http://sourceforge.net/projects/fvpatwds/ ;

L'installation nécessite ~180 Mo d'espace disque.

Un clic droit sur l'icône permet de voir toutes les commandes :

III - Construction de la base de données

III-A - Concevoir la base de données

Les contraintes peuvent être d'ordre technique et fonctionnelle :

Question Type Besoin Contraintes

être avec des images par

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 ;

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 ».

IV - Construction de l'application Web

Cela donne le résultat suivant :

IV-B - Que doit-on voir sur la première page ?

Le titre Qui est généralement le nom de l'application

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

Il y a deux types de technologies que nous allons utiliser :

V-B - Les balises

<meta /> : contient des informations sur la page.

<body> « corps de la page » </body> : permet de délimiter le contenu de la page.

<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.

V-C - La structure de la page d'accueil

Je crée donc une feuille de styles que je nomme « styles.css » :

V-D - La page « index.php »

V-D-1 - Structure et fonctionnement

Commande Besoin Page

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

VI - Autres fichiers utiles

VI-A - Connexion à la base de données

VI-B - Les fonctions

Exemple de fonction donnant la date sous la forme suivante 18/05/2011 :

VII - Répertoire de la « Maîtresse »

Commande Besoin Page

Nous allons utiliser les mêmes variables :

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

Et pour la correction orthographique et syntaxique : jacques_jean.

Vous aimerez peut-être aussi