Créée le, 02/12/2016

 Mise à jour le, 05/11/2017

Visiteurs N°  




Accueil
Nouveau Blog Nouveautés Moteur de Recherche Votre Caddie Pour Vos Achats Votre Espace Membre Vos Signets et Vos Jeux Préférés Page de Bienvenue Statique Site en Français Site en Anglais
Sommaires
Électronique Fondamentale Technologie Fondamentale Testez vos Connaissances Électronique Théorique Digitale Électronique Pratique Digitale Lexique Électronique Numérique Data book TTL Data book CMOS Dépannage TVC Mathématique
Micro-ordinateurs
Théorique des Micro-ordinateurs Testez vos Connaissances Pratique des Micro-ordinateurs Glossaires sur les Ordinateurs
Physique
La lumière Champ d'action Rayonnement Électromagnétique
Technologies
Classification des Résistances Identification des Résistances Classification des Condensateurs Identification des Condensateurs
Formulaires Mathématiques
Géométrie Physique 1. - Électronique 1. 2. - Électronique 1. 3. - Électrotechnique 1. 4. - Électromagnétisme
Accès à tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages N. B. M. - Tome I - 201 Pages E. T. M. - Tome I - 554 Pages Business à Domicile Ouvrages 34 pages gratuits Nos E-books Logiciel Géométrie Logiciel Composants Électroniques
Aperçu de tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages E. T. M. - Tome I - 554 Pages Logiciel Géométrie Logiciel Composants Électroniques
Nos Leçons aux Formats PDF
Électronique Fondamentale Technologie Fondamentale Électronique Théorique Digitale Électronique Pratique Digitale Théorique des Micro-ordinateurs Mathématiques
Informatique
Dépannage Win98 et WinXP et autres Dépannage PC Glossaire HTML et Programmes PHP et Programmes JavaScript (en cours de travaux) Création de plusieurs Sites
Forums
Nouveau Forum Électronique Forum Électronique et Infos Forum Électronique et Poésie
Divers et autres
Formulaire des pages perso News XML Statistiques CountUs Éditeur JavaScript Nos Partenaires et nos Liens Utiles Gestionnaire de Partenariat Nos Partenaires MyCircle Sondages 1er Livre d'Or 2ème Livre d'Or 3ème livre d'Or Déposez vos Annonces Annuaire Sites Agenda des Événements Album Photos

Signets :
  Leçons suivantes        Leçons précédentes     Bas de page
  Cliquez ici pour la leçon suivante ou dans le sommaire prévu à cet effet


Génération d'images via PHP (2ème partie) :



Utilisation de Représentation graphique de données numériques :


Dans la dernière application étudiée, nous avons manipulé des images et du texte existant. Nous allons à présent examiner un exemple de dessin dynamique via PHP.

Dans l'exemple considéré dans cette deuxième partie de cette leçon, un sondage est implémenté sur un site Web pour établir les intentions de vote des visiteurs du site, en prévision d'une élection fictive. Les résultats du sondage en ligne sont stockés dans une base de données MySQL, puis exploités sour la forme d'un graphique à barres, en utilisant des fonctions PHP de manipulation d'image.

Le tracé de graphes constitue l'autre grand domaine d'utilisation des fonctions PHP de création et de manipulation d'image. Vous pouvez tracer des graphes à partir de tout jeu de données, comme des données relatives aux ventes, ou à la fréquentation d'un site. L'exemple considéré ici nécessite la création d'une base de données dénommée jean_pierre. Cette base de données contient une table appelée jean_pierre_resultats, qui stocke dans la colonne Candidats le nom des canditats à l'élection, et dans la colonne Nombre_de_Votes, le nombre de votes reçu par chaque candidat. Un utilisateur doit être défini pour cette base de données, sous le nom de jean_pierre, et avec le mot de passe jean_pierre. Ce travail préliminaire de création de la base de données peut s'effectuer en quelques minutes, en exécutant le script SQL, donné au Listing 1. Vous pouvez exécuter ce script en pipe via le moniteur SQL.

Bien entendu, vous pouvez également ouvrir une session avec les identifiants de tout utilisateur bénéficiant des privilèges MySQL appropriés, qui se trouve en votre possession.

Listing 1. - Jean_Pierre_Setup_Votes.sql - Création et configuration de la base de données Jean_Pierre :


Concernant les serveurs à distant, vous devez supprimer use jean_pierre ainsi que to jean_pierre@localhost et identified by 'jean_pierre' ; dans le Listing 1. Sinon, pose problème.

(A cette occasion, nous mettons un fichier à télécharger dans l'intitulé Police "TrueType Arial.ttf", en cliquant ici, et à mettre ce même fichier dans le même répertoire de votre script que l'on verra plus bas de cette leçon).

Ainsi configurée, cette base de données contient six candidats. Le fichier Vote_Resultats.html fournit l'interface pour ce sondage en ligne. Son contenu est montré au Listing 2.

Listing 2. - Vote_Resultats.html - Les Internautes peuvent exprimer leur intention de vote dans ce formulaire :


Le résultat du chargement de la page Vote_Resultats.html est montré à la figure 1.


Sondage_Vote_de_chez_Jean_Pierre.png

Le principe de cette application est le suivant : lorsqu'un utilisateur clique sur le bouton Submit, son vote doit tout d'abord être ajouté à la base de données Jean_Pierre (en local), puis à la table jean_pierre_resultats (serveur à distant). Ensuite, les résultats courants du sondage, y compris l'intention de vote qui vient d'être exprimée, doivent être affichés sous la forme de graphe à barres.

Le résultat affiché après la saisie d'une intention de vote est montré à la figure 2.


Sondage_Graphe_de_chez_Jean_Pierre.png

Pour visualiser l'aperçu, en cliquant ici. [Exemple 3].

Le script générant l'image montrée à la figure 2 est assez long. Pour en simplifier l'étude, nous le décomposerons en quatre parties, que nous examinerons séparément. Ensuite, vous trouverez le script en totalité, en bas de page de cette leçon.

L'essentiel de ce script vous est déjà familier. Nous avons examiné jusqu'ici nombre d'exemples MySQL qui sont analogues à cette application. Par ailleurs, vous avez précédemment appris à peindre un canevas d'arrière-plan avec une couleur unie, et à dessiner des intitulés textuels, par exemple, sur des boutons.

Tout d'abord, nous mettons le script de connexion que vous connaissiez déjà dans le Linting 3, puisque ce script étant séparé des autres donc, ce fichier est intitulé Config_Connect_Vote.php : il suffit de rappeler ce fichier par les fonctions require() ou include().

Listing 3. - Config_Connect_Vote.php - Permettant de vous connecter à votre base de données de chez Jean_Pierre, en local :


Les parties de ce script qui sont résolument nouvelles dans le contexte de cette leçon sont celles qui concernent le dessin de traits et de rectangles. Nous nous concentrerons donc particulièrement sur ces sections. La première partie (des quatre parties que compte ce script) est donnée au Listing 4. 1.

Listing 4. 1. - Sondages.php - La partie 1 actualise la base de données et récupère les nouveaux résultats :


Cette première partie établit la connexion avec la base de données MySQL, actualise les intentions de vote, en prenant en compte les données entrées par l'utilisateur, et récupère les résultats courants du sondage. Une fois les informations ainsi récupérées, les calculs nécessaires à la représentation graphique de ces informations peuvent être effectués. La partie 2 de cette application est donnée au Listing 4. 2.

Listing 4. 2. - Sondages.php - La partie 2 définit toutes les variables nécessaires au tracé du graphe :


La deuxième partie de l'application consiste, en la définition des variables nécessaires au tracé du graphe.

Le choix des valeurs pour ces variables peut se révéler assez laborieux. Toutefois, vous faciliterez le processus de dessin, en vous attachant à définir précisément l'apparence que vous voulez finalement obtenir. Les valeurs spécifiées ici ont ainsi été obtenues, en esquissant sur une feuille de papier le graphe désiré, et en estimant les proportions requises.

La variable $Largeur stocke la largeur totale du canevas utilisé. Les marges gauche et droite doivent également être définies (avec respectivement $left_margin et $right_margin), ainsi que l'épaisseur et l'espacement des barres ($bar_height et $bar_spacing), la police, les tailles de police et la position des étiquettes textuelles ($font, $title_size, $main_size, $small_size, et $text_indent).

A partir de ces valeurs de base, plusieurs calculs peuvent être effectués. Une ligne de base doit être tracée, qui servira de ligne de départ à chacune des barres. La position de cette ligne de base est définie à partir de la marge gauche, en prenant en compte l'espace nécessaire à l'affichage des étiquettes textuelles de l'axe des X, et la longueur maximale autorisée des barres.

Deux autres valeurs importantes sont également déterminées dans cette deuxième partie : tout d'abord, la distance sur le graphe qui représente une unité :

    $bar_unit = (Largeur - ($x + $right_margin)) / 100 ; // Un "point" sur le graphe.

La largeur d'un point est obtenue, en divisant la longueur maximale d'une barre par 100 (puisque ce graphe va représenter des valeurs en pourcentage).

La deuxième valeur importante est la hauteur totale requise pour le canevas :

    $height = $Nombre_Candidats * ($bar_height + $bar_spacing) + 70 ;

Cette valeur est obtenue, en multipliant l'épaisseur d'une barre par le nombre de barres, et en ajoutant une longueur supplémentaire pour l'affichage du titre.

La Partie 3 de ce script est montrée au Listing 4. 3.

Listing 4. 3. - Sondages.php - La partie 3 définit le graphe, de sorte qu'il soit prêt à recevoir des données :


Cette troisième partie de l'application définit l'image de base, alloue les couleurs, puis commence le tracé du graphe.

L'arrière-plan du graphe est peint au moyen de la fonction suivante :

    ImageFilledRectangle($image, 0, 0, $Largeur, $height, $bg_color) ;

La fonction ImageFilledRectangle(), comme son nom l'indique, dessine un rectangle rempli d'une couleur unie. Son premier paramètre est, comme d'habitude, l'identificateur de l'image. La fonction prend ensuite comme argument les coordonnées X et Y du point initial et du point final du tracé du rectange. Ceux-ci correspondent respectivement au coin supérieur gauche et au coin inférieur droit du rectangle. Dans ce cas précis, l'intégralité du canevas est rempli avec la couleur d'arrière-plan, spécifiée dans le dernier paramètre (le blanc). L'appel suivant :

    ImageRectangle($image, 0, 0, $Largeur - 1, $height - 1, $line_color) ;

provoque ensuite le tracé d'une bordure noire encadrant le canevas. La fonction ImageRectangle() trace le contour d'un rectangle au lieu de dessiner un rectange plein. Ses paramètres sont identiques à ceux de la fonction ImageFilledRectangle(). Notez que le rectangle est ici dessiné jusque $Largeur - 1 et $height - 1 (c'est-à-dire de 0,0 jusqu'à ces valeurs). Si le rectangle avait été dessiné jusque $Largeur et $height, il serait "sortie" de la zone du canevas.

Pour écrire le titre du graphe, la même logique et les mêmes fonctions que celles de l'exemple précédent ont été utilisées.

Et pour finir, la ligne de base des barres est tracée, au moyen de la ligne de code suivante :

    ImageLine($image, $x, $y - 10, $x, $height - 20, $line_color) ;

La fonction ImageLine() dessine un trait sur l'image spécifiée à gauche ($image), du point défini par un jeu de coordonnées ($x, $y - 10), jusqu'à un autre point lui aussi défini par ses coordonnées ($x, $height - 20), dans la couleur spécifiée par $line_color.

Dans ce cas, la ligne de base est tracée à gauche du canevas, en partant d'un point situé légèrement au-dessus de la position de départ de la première barre, jusqu'à un point situé légèrement en-dessous du bas du canevas.

A ce stade, les données peuvent être représentées dans le graphe. La partie 4 du script est donnée au Listing 4. 4.

Listing 4. 4. - Sondages.php - La partie 4 dessine les données sur le graphe et achève le script :


La partie 4 traite un à un les candidats stockés dans la base de données, détermine le pourcentage des intentions de vote, et trace les barres et les étiquettes textuelles pour chaque candidat.

Là aussi, les étiquettes textuelles sont tracées au moyen de la fonction ImageTTFText(). Les barres sont dessinées sous la forme de rectangles pleins, au moyen de la fonction ImageFilledRectangle(), comme suit :

    ImageFilledRectangle($image, $x, $y - 2, $bar_length, $y + $bar_height, $bar_color) ;

Les bords représentant la limite des 100 % sont tracés au moyen de la fonction ImageRectangle() comme suit :

    ImageRectangle($image, $bar_length + 1, $y - 2, ($x + (100 * $bar_unit)), $y + $bar_height, $line_color) ;

Une fois toutes les barres tracées, la fonction ImagePNG() est utilisée pour afficher l'image dans le navigateur. Un nettoyage final est ensuite effectué au moyen de la fonction ImageDestroy().

A noter : nous sauvegardons l'image du sondage sur le disque dur pour la restaurer par la suite au moyen du langage HTML pour des raisons techniques, comme suit : (voir le Listing 4. 1.)

    <CENTER> <img src = 'Rectangle.png' alt = 'Rectangle.png' border = '0' width = '580' height = '380'> </CENTER>

Rectangle.png

Cette image dynamique du canevas ci-dessus se mettra à jour automatiquement d'où le nom sus évoqué.

Le script de cet exemple, s'il est plutôt long, présente l'avantage d'être facilement adaptable à des besoins spécifiques. Ce script ne comprend toutefois pas de mécanisme ainti-fraude. Les utilisateurs découvriraient rapidement qu'ils peuvent voter plusieurs fois, faussant ainsi la légitimité du sondage.

L'approche décrite dans cet exemple peut également être suivie pour dessiner des graphes linéaires, voire des diagrammes circulaires, à condition toutefois d'être versé dans l'art des mathématiques.

Listing 4. 5. - Sondages.php - La partie 5 - Le script complet du sondage :


N'oubliez pas d'insérer le script de connexion du Listing 3 dans l'intitulé Config_Connect_Vote.php se trouvant à part, concernant le script du Listing 4. 5. (voir la fonction require().

Autres fonctions de création et de manipulation d'image :

Outre les fonctions d'image utilisées dans cette leçon, PHP offre des fonctions qui permettent de tracer des lignes courbes (ImageArc()) et des polygones (ImagePolygon()), ainsi que diverses variantes des fonctions mises en œuvre jusqu'ici. Attachez-vous à toujours planifier vos tracés avant de vous plonger dans cette leçon pour trouver les fonctions qui vous permettrons d'atteindre l'objectif recherché.

Vous trouverez également en ligne, une abondante documentation écrite sur ce sujet. Si vous rencontrez des difficultés lors de la mise en œuvre d'une fonction de création ou de manipulation d'image, vous gagnerez sans doute du temps à consulter la documentation d'origine de la bibliothèque GD, car les fonctions PHP sont des enveloppes pour cette bibliothèque. Cette documentation est disponible à l'URL ci-après : en cliquant ici.

Il existe également sur le Web d'excellents didacticiels sur des types particuliers d'applications de tracé de graphes, notamment sur les sites Web suivants :

http://www.zend.com, en cliquant ici.

http://devshed.com, en cliquant ici.

L'application de tracé de graphe à barres décrite dans cette leçon, s'inspire du script de tracé dynamique de graphe à barres écrit par Steve Maranda et disponible sur le site de Devshed, en anglais.

Nous terminons ainsi cette treizième leçon et nous verrons dans la prochaine, l'Authentification des Utilisateurs et Personnalisation du site.



  Cliquez ici pour la leçon suivante ou dans le sommaire prévu à cet effet.   Haut de page
  Page précédente   Page suivante




    






Envoyez un courrier électronique à Administrateur Web Société pour toute question ou remarque concernant ce site Web. 

Version du site : 10. 4. 12 - Site optimisation 1280 x 1024 pixels - Faculté de Nanterre - Dernière modification : 05 Novembre 2017.   

Ce site Web a été Créé le, 14 Mars 1999 et ayant Rénové, en Novembre 2017.