Créer sa première Application Web

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 :

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 :

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.

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.

Donc la première page (page d'accueil) pourrait avoir la forme suivante :

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 :

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.

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.

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.

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.

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

...
    <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-1. Structure et fonctionnement▲

if (empty($_GET['id'])) {
    $id = 0;
    } else {
    $id = $_GET['id'];
    }

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▲

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.

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.