Créer sa première Application Web

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.

9 commentaires Donner une note à l'article (5)

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Google Bookmarks ! Facebook Digg del.icio.us Yahoo MyWeb Blinklist Netvouz Reddit Simpy StumbleUpon Bookmarks Share on Google+ 

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 :

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 :

Image non disponible

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

Lancer le programme :

Image non disponible
Image non disponible
Image non disponible
Image non disponible
Image non disponible
Image non disponible
Image non disponible
Image non disponible
Image non disponible

Une fois l'application ouverte, l'on aperçoit dans la barre de tâche l'icône suivante : Image non disponible

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

Image non disponible

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 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.
Et je vais aussi rajouter un état (emprunté, disponible et indisponible).
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 pourrait ressembler les différentes tables :

Image non disponible

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 :

Image non disponible

III-B. Création de la base de données

Pour créer la base de données, je vais lancer PHPMyAdmin :

Image non disponible

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

Image non disponible

Ensuite, on arrive sur le programme lui-même :

Image non disponible

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 :

Image non disponible

Il faut saisir le nom de la base de données, dans l'emplacement réservé « Créer une base ».

Image non disponible

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…

Image non disponible

III-B-2. Importer un fichier

Dans ce cas, cliquer sur « Importer » et l'écran suivant apparaît :

Image non disponible

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 :

Image non disponible

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 :

Image non disponible

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 :

Image non disponible

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 :

Image non disponible

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

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 ») :

Image non disponible

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
Sélectionnez
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
Sélectionnez
...
    <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.
La valeur 1 sera pour l'emprunt et la valeur 2 pour le retour.
$id

Pour tester l'existence des variables je vais utiliser la fonction suivante :

code.php
Sélectionnez
if (empty($_GET['id'])) {
    $id = 0;
    } else {
    $id = $_GET['id'];
    }

Pour inclure les différentes pages je vais utiliser la fonction suivante :

code.php
Sélectionnez
switch($id) {
    case 0:
    include 'page1.php';
    break;
    case 1:
    include 'page2.php';
    break;
    default:
    include 'page3.php';
    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
Sélectionnez
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 Farid63.

Et pour la correction orthographique et syntaxique : jacques_jean.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Google Bookmarks ! Facebook Digg del.icio.us Yahoo MyWeb Blinklist Netvouz Reddit Simpy StumbleUpon Bookmarks Share on Google+ 

  

Licence Creative Commons
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.