L'optimisation du code et des temps de réponse est un sujet rarement évoqué dans le développement web.
L'optimisation est souvent réservée aux applications professionnelles
sensibles. Pourtant tout webmaster est concerné directement par cette
question.
Le développement des accès haut-débit depuis près de 2 ans a 2 conséquences majeures :
- l'augmentation du nombre d'internautes et donc de visiteurs potentiels
- l'augmentation du temps moyen de connexion et donc du nombre de pages vues
Les hébergeurs ont pour la plupart déjà fait profiter leurs clients
d'augmentation de la bande passante.
Par exemple chez OVH, la bande passante fournie avec les serveurs
dédiées a pratiquement été multipliée par 10 en 2004, sans supplément
de prix.
La bande passante qui était encore récemment un point critique ne pose
plus réellement de problème, sauf pour certaines applications
spécifiques de téléchargement ou de radio en ligne par exemple.
En revanche, la puissance des serveurs n'a pas suivi le même rythme de
croissance que l'augmentation de la population d'internautes : on
considère généralement que la puissance des processeurs double tous les
18 mois selon la loi de Moore qui prédit "seulement" que "le nombre de transistors par cicuit de même taille va doubler tous les 18 mois".
C'est bien la puissance CPU qui est devenu le facteur limitant aujourd'hui.
Les hébergeurs sont très attentifs à la consommation CPU des sites sur
hébergements mutualisés. En cas de dépassement des limites, l'accès
peut être coupé.
Pour un site sur serveur dédié, l'optimisation du code permet de
proposer à ses visiteurs un site rapide et fiable et d'éviter la
surenchère technologique et les coûts associés à l'augmentation des
capacités matérielles.
Une optimisation réussie apporte pour vos visiteurs un plus grand
confort de navigation et pour vous une meilleure maîtrise des coûts
d'hébergement et surtout une plus grande sérénité par rapport aux
risques de plantages du site.
Nous allons voir dans ce tutorial comment mesurer les performances d'un
site et les différents moyens d'optimiser les temps de traitement coté
SQL, PHP et configuration.
Je n'ai pas la prétention d'être exhaustif dans ces quelques pages. Je
donne simplement quelques solutions que j'ai mises en application
moi-même avec un certain succès au niveau PHP, MySQL et Apache.
N'hésitez pas à me signaler les éventuelles erreurs et vos solutions d'optimisation.
Voici le sommaire de cet article (les prochaines parties suivent bientôt).
1 - Mesurer les performances
Etape indispensable pour optimiser : être capable de faire l'état des lieux et de mesurer les améliorations.
2 - Optimiser MySQL
Le moteur SQL est certainement l'élément qui a le plus fort potentiel d'optimisation.
3 - Utiliser le cache MySQL
A partir de la version 4 de MySQL, une gestion de cache ouvre de nouvelles possibilités.
4 - Utiliser les caches fichiers
Les principes du cache et une solution détaillée avec Cache Lite.
5 - Optimiser le serveur
Il existe de nombreuses astuces efficaces pour accélérer les traitements sur le serveur.
Structure d'une base de données
Introduction
Devant le succès des premiers tutoriaux sur le PHP, voici une introduction aux bases de données.
L'avantage considérable d'un langage serveur comme le PHP est qu'il peut conserver des données saisies par des utilisateurs, les traiter, les trier et les afficher aux autres visiteurs. Avec le PHP, on peut donc faire des forums, des livres d'or, des sondages. Bref tout ce qui est interactif sur le web.
Pour sauver des données, beaucoup pensent que le meilleur moyen est d'utiliser des fichiers texte. C'est une solution possible. La solution la plus souple et nécessitant le moins de développements est la base de données. Toutes les fonctions de sélection, de tri, de recherche, d'insertion, de modification et de suppression sont possibles grâce aux langage de requêtes SQL (Structured Query Language).
C'est donc l'utilisation des bases de données MySQL avec PHP que nous allons aborder dans ce tutorial.
PHP est très souvent utilisé en association avec le système de gestion de base de données (SGBD) MySQL. Les hébergeurs qui supportent le PHP proposent tous MySQL. De même le package EasyPHP que nous avons déjà vu dans le tutorial Introduction au PHP installe automatiquement MySQL. Nous sommes donc prêts à démarrer avec une base de données.
Avertissement 1 : La lecture des tutoriaux "JavaScript et PHP", "Introduction au PHP" et "Traiter des données en PHP" est un pré-requis absolument nécessaire.
Avertissement 2 : Ce tutorial est une vulgarisation des bases de données. L'objectif est de comprendre leur fonctionnement et leur intérêt (par rapport aux fichiers texte par exemple) et d'apprendre à les utiliser. Celui qui vient me parler de 3ème forme normale ou de méthode MERISE dans ce contexte n'a rien compris à l'esprit de cette section du site...
Avertissement 3 : Les bases de données sont très puissantes, mais il faut un minimum de concentration et de travail pour comprendre. N'imaginez pas que vous allez faire un script de forum en 30 minutes. Que les fainéants passent directement à autre chose.
Plan du tutorial :
1 - Structure d'une base de données
2 - Utilisation de PHPMyAdmin
3 - Accès à une base de données en SQL
4 - Accès à une base de données en PHP
Structure d'une base de données
A quoi sert une base de données
Une base de données est destinée :
- à stocker des données structurées et organisées - à manipuler ces données grâce a leur organisation.
Une base de données contient des tables ayant des rapports logiques entre elles.
Une table peut être comparer à un tableau de données.
Dans ce tutorial, nous allons prendre l'exemple de la base de données Catalogue qui contient les tables Catégorie et Produit. L'objectif est donc de créer une base de données qui contiendra toutes les informations d'un catalogue de produits.
On a souvent tendance à confondre base et table. Ce sont pourtant 2 objets bien différents.
Une base regroupe des tables sur le même domaine d'informations (ici le domaine catalogue de produits).
Table et clé primaire
La table "Categorie", dont le but est de lister toutes les catégories du catalogue, est définie comme ceci :
Chaque ligne d'une table correspond à un enregistrement. Ici un enregistrement est une catégorie.
Une colonne est une propriété d'un enregistrement.
Cette table contient 2 colonnes :
La colonne "Nom" sert à enregistrer le nom d'une catégorie sous forme de texte.
La colonne "Identifiant" est un nombre entier qui sert à identifier de manière unique un enregistrement (ou ligne) de la table.
On appelle cet identifiant unique la clé primaire de la table. On pourrait également identifier une catégorie par son nom. Mais il faut éviter car :
- le nom peut changer (erreur de saisie par exemple)
- le SQL est beaucoup plus rapide pour manipuler des entier.
L'identifiant d'une table permet également de faire des liens avec d'autres tables. Nous allons voir comment faire un lien entre un produit et sa catégorie.
Liens entre tables
La table "produit", dont le but est de contenir les produits d'un catalogue, est définie comme ceci :
Ici aussi, une ligne correspond à un enregistrement, c'est-à-dire à un produit.
- Nous retrouvons également l'identifiant unique (ou clé primaire)
- La colonne Nom contient le nom du produit
- La colonne Prix contient le prix sous forme numérique
- La colonne Vignette contient l'adresse d'une image correspondant au produit
- La colonne Categorie contient un nombre qui est un lien vers la clé primaire de la table Categorie. Vous remarquez qu'on n'enregistre pas le nom de la catégorie dans cette colonne, mais juste un identifiant. Dans ce cas, la colonne est une clé externe vers la table Categorie.
Voici les avantages d'utiliser une clé externe :
- Gain de place de stockage (Enregistrer un entier est bien moins volumineux que d'enregistrer un libellé complet)
- Gain de mise à jour (Si un jour le libellé Processeur Intel doit devenir Processeur INTEL, il suffit de changer la ligne 2 de la table Categorie et tous les produits de la catégorie 2 profiteront de la mise à jour)
- Gain de rapidité (Manipuler un entier est plus rapide que manipuler du texte)
Modèle de données
Un modèle graphique de représentation du schéma de la base avec les liens entre base serait :
Les tables sont représentées par des boîtes avec leur nom et leurs colonnes.
La colonne Identifiant est soulignée car elle correspond à la clé primaire.
La clé externe Categorie de la table Produit est reliée par une flèche à la table Categorie pour montrer le lien.
La simple flèche vers la table Categorie montre qu'un produit peut être attaché à une seule catégorie.
La double flèche vers la table Produit montre qu'une catégorie peut concerner plusieurs produits.
On pourrait enrichir la base en ajoutant une table des marques de produits avec une clé externe entre un produit et sa marque. Le modèle de données serait alors :
Questions fréquentes sur les bases de données
* Le nombre de produits n'est pas stocké dans la table Categorie car on peut le retrouver autrement.
Il suffit de compter le nombre de produits par colonne Categorie.
On sait par exemple qu'il y a 2 produits de la catégorie "Processeur Intel".
En règle générale, il faut éviter de stocker des données redondantes qui peuvent être retrouvées autrement. Sauf dans certains cas, si le moyen de retrouver cette donnée est gourmand en ressources CPU ou si cette donnée est souvent demandée.
* Il n'est pas utile de gérer les numéros d'identifiant manuellement. Le système de base de données le gère automatiquement en incrémentant l'identifiant d'une unité à chaque insertion de ligne.
* Les caractères spéciaux (accents, espace, ...) sont à éviter dans les noms des tables et des colonnes.
Il est egalement conseillé d'éviter d'appeler une table ou une colonne par un mot réservé du SQL.
Devant le succès des premiers tutoriaux sur le PHP, voici une introduction aux bases de données.
L'avantage considérable d'un langage serveur comme le PHP est qu'il peut conserver des données saisies par des utilisateurs, les traiter, les trier et les afficher aux autres visiteurs. Avec le PHP, on peut donc faire des forums, des livres d'or, des sondages. Bref tout ce qui est interactif sur le web.
Pour sauver des données, beaucoup pensent que le meilleur moyen est d'utiliser des fichiers texte. C'est une solution possible. La solution la plus souple et nécessitant le moins de développements est la base de données. Toutes les fonctions de sélection, de tri, de recherche, d'insertion, de modification et de suppression sont possibles grâce aux langage de requêtes SQL (Structured Query Language).
C'est donc l'utilisation des bases de données MySQL avec PHP que nous allons aborder dans ce tutorial.
PHP est très souvent utilisé en association avec le système de gestion de base de données (SGBD) MySQL. Les hébergeurs qui supportent le PHP proposent tous MySQL. De même le package EasyPHP que nous avons déjà vu dans le tutorial Introduction au PHP installe automatiquement MySQL. Nous sommes donc prêts à démarrer avec une base de données.
Avertissement 1 : La lecture des tutoriaux "JavaScript et PHP", "Introduction au PHP" et "Traiter des données en PHP" est un pré-requis absolument nécessaire.
Avertissement 2 : Ce tutorial est une vulgarisation des bases de données. L'objectif est de comprendre leur fonctionnement et leur intérêt (par rapport aux fichiers texte par exemple) et d'apprendre à les utiliser. Celui qui vient me parler de 3ème forme normale ou de méthode MERISE dans ce contexte n'a rien compris à l'esprit de cette section du site...
Avertissement 3 : Les bases de données sont très puissantes, mais il faut un minimum de concentration et de travail pour comprendre. N'imaginez pas que vous allez faire un script de forum en 30 minutes. Que les fainéants passent directement à autre chose.
Plan du tutorial :
1 - Structure d'une base de données
2 - Utilisation de PHPMyAdmin
3 - Accès à une base de données en SQL
4 - Accès à une base de données en PHP
Structure d'une base de données
A quoi sert une base de données
Une base de données est destinée :
- à stocker des données structurées et organisées - à manipuler ces données grâce a leur organisation.
Une base de données contient des tables ayant des rapports logiques entre elles.
Une table peut être comparer à un tableau de données.
Dans ce tutorial, nous allons prendre l'exemple de la base de données Catalogue qui contient les tables Catégorie et Produit. L'objectif est donc de créer une base de données qui contiendra toutes les informations d'un catalogue de produits.
On a souvent tendance à confondre base et table. Ce sont pourtant 2 objets bien différents.
Une base regroupe des tables sur le même domaine d'informations (ici le domaine catalogue de produits).
Table et clé primaire
La table "Categorie", dont le but est de lister toutes les catégories du catalogue, est définie comme ceci :
|
Chaque ligne d'une table correspond à un enregistrement. Ici un enregistrement est une catégorie.
Une colonne est une propriété d'un enregistrement.
Cette table contient 2 colonnes :
La colonne "Nom" sert à enregistrer le nom d'une catégorie sous forme de texte.
La colonne "Identifiant" est un nombre entier qui sert à identifier de manière unique un enregistrement (ou ligne) de la table.
On appelle cet identifiant unique la clé primaire de la table. On pourrait également identifier une catégorie par son nom. Mais il faut éviter car :
- le nom peut changer (erreur de saisie par exemple)
- le SQL est beaucoup plus rapide pour manipuler des entier.
L'identifiant d'une table permet également de faire des liens avec d'autres tables. Nous allons voir comment faire un lien entre un produit et sa catégorie.
Liens entre tables
La table "produit", dont le but est de contenir les produits d'un catalogue, est définie comme ceci :
|
Ici aussi, une ligne correspond à un enregistrement, c'est-à-dire à un produit.
- Nous retrouvons également l'identifiant unique (ou clé primaire)
- La colonne Nom contient le nom du produit
- La colonne Prix contient le prix sous forme numérique
- La colonne Vignette contient l'adresse d'une image correspondant au produit
- La colonne Categorie contient un nombre qui est un lien vers la clé primaire de la table Categorie. Vous remarquez qu'on n'enregistre pas le nom de la catégorie dans cette colonne, mais juste un identifiant. Dans ce cas, la colonne est une clé externe vers la table Categorie.
Voici les avantages d'utiliser une clé externe :
- Gain de place de stockage (Enregistrer un entier est bien moins volumineux que d'enregistrer un libellé complet)
- Gain de mise à jour (Si un jour le libellé Processeur Intel doit devenir Processeur INTEL, il suffit de changer la ligne 2 de la table Categorie et tous les produits de la catégorie 2 profiteront de la mise à jour)
- Gain de rapidité (Manipuler un entier est plus rapide que manipuler du texte)
Modèle de données
Un modèle graphique de représentation du schéma de la base avec les liens entre base serait :
Les tables sont représentées par des boîtes avec leur nom et leurs colonnes.
La colonne Identifiant est soulignée car elle correspond à la clé primaire.
La clé externe Categorie de la table Produit est reliée par une flèche à la table Categorie pour montrer le lien.
La simple flèche vers la table Categorie montre qu'un produit peut être attaché à une seule catégorie.
La double flèche vers la table Produit montre qu'une catégorie peut concerner plusieurs produits.
On pourrait enrichir la base en ajoutant une table des marques de produits avec une clé externe entre un produit et sa marque. Le modèle de données serait alors :
Questions fréquentes sur les bases de données
* Le nombre de produits n'est pas stocké dans la table Categorie car on peut le retrouver autrement.
Il suffit de compter le nombre de produits par colonne Categorie.
On sait par exemple qu'il y a 2 produits de la catégorie "Processeur Intel".
En règle générale, il faut éviter de stocker des données redondantes qui peuvent être retrouvées autrement. Sauf dans certains cas, si le moyen de retrouver cette donnée est gourmand en ressources CPU ou si cette donnée est souvent demandée.
* Il n'est pas utile de gérer les numéros d'identifiant manuellement. Le système de base de données le gère automatiquement en incrémentant l'identifiant d'une unité à chaque insertion de ligne.
* Les caractères spéciaux (accents, espace, ...) sont à éviter dans les noms des tables et des colonnes.
Il est egalement conseillé d'éviter d'appeler une table ou une colonne par un mot réservé du SQL.
Le formulaire HTML
Ce tutorial est un complément du script "Notation par curseur et
smileys" qui permet ainsi d'enregistrer la note saisie par les
visiteurs. Le traitement dédié à ce script est détaillé dans la
troisième page de cet article.
Le javascript ne permet pas de traiter des données pour les enregistrer dans une base de données ou un fichier.
La solution est d'utiliser un langage serveur. PHP est de loin le plus accessible et le plus courant. Je vous conseille la lecture des tutoriaux "Introduction au PHP" et "Javascript et PHP".
1 - Le formulaire HTML
Définition d'un formulaire
Le moyen le plus courant pour transmettre des informations depuis le visiteur vers le serveur est d'utiliser les formulaires.
Un formulaire est défini par la balise <FORM> et </FORM>.
Voici un exemple de formulaire
<FORM name="monform" action="page.php" method="post" target="_blank">
Zone de texte : <INPUT type="text" name="champtexte">
<INPUT type="submit" value="Envoyer">
</FORM>
qui donne l'affichage suivant :
Un objet FORM a comme paramètre un nom, une action et une méthode de transmission vers le serveur.
name sert à manipuler et reconnaître l'objet FORM dans la page
action contient l'adresse du script qui va recevoir et traiter les données du formulaire. Ici le formulaire sera envoyé à "page.php".
method indique le type de transmission des données. "post" cache les données transmises au visiteur. "get" les rend visibles. Je préfère utiliser "post" qui est plus discret et qui n'allonge pas l'url dans la barre d'adresse.
On peut aussi définir une destination par le paramètre target, équivalent au target de la balise de lien <A>.
Envoi du formulaire
L'envoi du formulaire (ou soumission ou submit en anglais) peut se faire de 2 manières.
- Soit par un bouton de type submit :
<INPUT type="submit" value="Envoyer">
Dans ce cas, le formulaire est envoyé directement quand on clique sur le bouton
- Soit par du javascript :
document.monform.submit()
Voir le tutorial javascript sur les formulaires pour tous les détails sur la manipulation des formulaires.
Le javascript ne permet pas de traiter des données pour les enregistrer dans une base de données ou un fichier.
La solution est d'utiliser un langage serveur. PHP est de loin le plus accessible et le plus courant. Je vous conseille la lecture des tutoriaux "Introduction au PHP" et "Javascript et PHP".
1 - Le formulaire HTML
Définition d'un formulaire
Le moyen le plus courant pour transmettre des informations depuis le visiteur vers le serveur est d'utiliser les formulaires.
Un formulaire est défini par la balise <FORM> et </FORM>.
Voici un exemple de formulaire
<FORM name="monform" action="page.php" method="post" target="_blank">
Zone de texte : <INPUT type="text" name="champtexte">
<INPUT type="submit" value="Envoyer">
</FORM>
qui donne l'affichage suivant :
Un objet FORM a comme paramètre un nom, une action et une méthode de transmission vers le serveur.
name sert à manipuler et reconnaître l'objet FORM dans la page
action contient l'adresse du script qui va recevoir et traiter les données du formulaire. Ici le formulaire sera envoyé à "page.php".
method indique le type de transmission des données. "post" cache les données transmises au visiteur. "get" les rend visibles. Je préfère utiliser "post" qui est plus discret et qui n'allonge pas l'url dans la barre d'adresse.
On peut aussi définir une destination par le paramètre target, équivalent au target de la balise de lien <A>.
Envoi du formulaire
L'envoi du formulaire (ou soumission ou submit en anglais) peut se faire de 2 manières.
- Soit par un bouton de type submit :
<INPUT type="submit" value="Envoyer">
Dans ce cas, le formulaire est envoyé directement quand on clique sur le bouton
- Soit par du javascript :
document.monform.submit()
Voir le tutorial javascript sur les formulaires pour tous les détails sur la manipulation des formulaires.
PHP langage serveur
J'ai décidé de présenter cette introduction au PHP pour 3 raisons :
1 - Le PHP est un langage de plus en plus utilisé qu'il serait dommage de ne pas adopter très vite,
2 - Beaucoup me posent des questions de base sur le php,
3 - Le javascript ne peut pas tout faire (loin de la) et le PHP est un allié puissant.
Je n'ai pas l'ambition dans ce tutorial de faire mieux que mes collègues spécialistes du PHP (voir l'annuaire pour une sélection des meilleurs sites traitant du php). Je souhaite simplement présenter les bases de ce langage puissant, facile et passionnant.
Je vous invite à lire cet autre tutorial qui présente le principe d'un langage serveur et les différences entre le javascript et le PHP.
1 - PHP langage serveur
A la grande différence du javascript, le PHP est exécuté sur le serveur, AVANT que le visiteur ne recoive la page.
Pour simplifier, un visiteur tape une adresse dans son navigateur (www.monsite.com/page.php), le script PHP contenu dans le fichier page.php est exécuté par le serveur puis renvoyé vers le visiteur. Si cette page contient du code javascript, le visiteur pourra alors l'exécuter sur son ordinateur.
Cela signifie donc que pour exécuter du code PHP, il faut faire un appel au serveur, c'est-à-dire ouvrir une page dans le navigateur.
Pour exécuter un script PHP, il faut que le serveur reconnaisse et comprenne le PHP. Ce n'est pas le cas de tous les hébergeurs, même si de plus en plus ont intégré le support du PHP.
Quelques hébergeurs gratuits qui supportent le PHP :
Il y en a bien d'autres...
Attention, Wanadoo ou Ifrance, par exemple, ne le supportent pas encore (septembre 2002).
Je vous recommande Free.fr comme hébergement, sans aucune publicité. La seule contrepartie est d'ouvrir un compte (sans abonnement) chez eux.
1 - Le PHP est un langage de plus en plus utilisé qu'il serait dommage de ne pas adopter très vite,
2 - Beaucoup me posent des questions de base sur le php,
3 - Le javascript ne peut pas tout faire (loin de la) et le PHP est un allié puissant.
Je n'ai pas l'ambition dans ce tutorial de faire mieux que mes collègues spécialistes du PHP (voir l'annuaire pour une sélection des meilleurs sites traitant du php). Je souhaite simplement présenter les bases de ce langage puissant, facile et passionnant.
Je vous invite à lire cet autre tutorial qui présente le principe d'un langage serveur et les différences entre le javascript et le PHP.
1 - PHP langage serveur
A la grande différence du javascript, le PHP est exécuté sur le serveur, AVANT que le visiteur ne recoive la page.
Pour simplifier, un visiteur tape une adresse dans son navigateur (www.monsite.com/page.php), le script PHP contenu dans le fichier page.php est exécuté par le serveur puis renvoyé vers le visiteur. Si cette page contient du code javascript, le visiteur pourra alors l'exécuter sur son ordinateur.
Cela signifie donc que pour exécuter du code PHP, il faut faire un appel au serveur, c'est-à-dire ouvrir une page dans le navigateur.
Pour exécuter un script PHP, il faut que le serveur reconnaisse et comprenne le PHP. Ce n'est pas le cas de tous les hébergeurs, même si de plus en plus ont intégré le support du PHP.
Quelques hébergeurs gratuits qui supportent le PHP :
| Hébergeur | Adresse | Inconvénients | Mon avis |
| Multimania | www.multimania.fr | Pub par popup ou DHTML | La pub est vraiment trop présente Acheté par Lycos |
| Chez | www.chez.com | Publicité par popup ou frame | Trop de pub aussi Acheté par Tiscali |
| Respublica | www.respublica.fr | Migration vers Chez.com | Trop de pub aussi Acheté par Tiscali |
| Freesurf | www.freesurf.fr | Publicité par popups | Trop de pub aussi |
| Free | www.free.fr | Obligation de souscrire à l'offre d'accès sans abonnement | Aucune publicité. Hébergement vivement conseillé |
Il y en a bien d'autres...
Attention, Wanadoo ou Ifrance, par exemple, ne le supportent pas encore (septembre 2002).
Je vous recommande Free.fr comme hébergement, sans aucune publicité. La seule contrepartie est d'ouvrir un compte (sans abonnement) chez eux.
PHP langage serveur
J'ai décidé de présenter cette introduction au PHP pour 3 raisons :
1 - Le PHP est un langage de plus en plus utilisé qu'il serait dommage de ne pas adopter très vite,
2 - Beaucoup me posent des questions de base sur le php,
3 - Le javascript ne peut pas tout faire (loin de la) et le PHP est un allié puissant.
Je n'ai pas l'ambition dans ce tutorial de faire mieux que mes collègues spécialistes du PHP (voir l'annuaire pour une sélection des meilleurs sites traitant du php). Je souhaite simplement présenter les bases de ce langage puissant, facile et passionnant.
Je vous invite à lire cet autre tutorial qui présente le principe d'un langage serveur et les différences entre le javascript et le PHP.
1 - PHP langage serveur
A la grande différence du javascript, le PHP est exécuté sur le serveur, AVANT que le visiteur ne recoive la page.
Pour simplifier, un visiteur tape une adresse dans son navigateur (www.monsite.com/page.php), le script PHP contenu dans le fichier page.php est exécuté par le serveur puis renvoyé vers le visiteur. Si cette page contient du code javascript, le visiteur pourra alors l'exécuter sur son ordinateur.
Cela signifie donc que pour exécuter du code PHP, il faut faire un appel au serveur, c'est-à-dire ouvrir une page dans le navigateur.
Pour exécuter un script PHP, il faut que le serveur reconnaisse et comprenne le PHP. Ce n'est pas le cas de tous les hébergeurs, même si de plus en plus ont intégré le support du PHP.
Quelques hébergeurs gratuits qui supportent le PHP :
Il y en a bien d'autres...
Attention, Wanadoo ou Ifrance, par exemple, ne le supportent pas encore (septembre 2002).
Je vous recommande Free.fr comme hébergement, sans aucune publicité. La seule contrepartie est d'ouvrir un compte (sans abonnement) chez eux.
1 - Le PHP est un langage de plus en plus utilisé qu'il serait dommage de ne pas adopter très vite,
2 - Beaucoup me posent des questions de base sur le php,
3 - Le javascript ne peut pas tout faire (loin de la) et le PHP est un allié puissant.
Je n'ai pas l'ambition dans ce tutorial de faire mieux que mes collègues spécialistes du PHP (voir l'annuaire pour une sélection des meilleurs sites traitant du php). Je souhaite simplement présenter les bases de ce langage puissant, facile et passionnant.
Je vous invite à lire cet autre tutorial qui présente le principe d'un langage serveur et les différences entre le javascript et le PHP.
1 - PHP langage serveur
A la grande différence du javascript, le PHP est exécuté sur le serveur, AVANT que le visiteur ne recoive la page.
Pour simplifier, un visiteur tape une adresse dans son navigateur (www.monsite.com/page.php), le script PHP contenu dans le fichier page.php est exécuté par le serveur puis renvoyé vers le visiteur. Si cette page contient du code javascript, le visiteur pourra alors l'exécuter sur son ordinateur.
Cela signifie donc que pour exécuter du code PHP, il faut faire un appel au serveur, c'est-à-dire ouvrir une page dans le navigateur.
Pour exécuter un script PHP, il faut que le serveur reconnaisse et comprenne le PHP. Ce n'est pas le cas de tous les hébergeurs, même si de plus en plus ont intégré le support du PHP.
Quelques hébergeurs gratuits qui supportent le PHP :
| Hébergeur | Adresse | Inconvénients | Mon avis |
| Multimania | www.multimania.fr | Pub par popup ou DHTML | La pub est vraiment trop présente Acheté par Lycos |
| Chez | www.chez.com | Publicité par popup ou frame | Trop de pub aussi Acheté par Tiscali |
| Respublica | www.respublica.fr | Migration vers Chez.com | Trop de pub aussi Acheté par Tiscali |
| Freesurf | www.freesurf.fr | Publicité par popups | Trop de pub aussi |
| Free | www.free.fr | Obligation de souscrire à l'offre d'accès sans abonnement | Aucune publicité. Hébergement vivement conseillé |
Il y en a bien d'autres...
Attention, Wanadoo ou Ifrance, par exemple, ne le supportent pas encore (septembre 2002).
Je vous recommande Free.fr comme hébergement, sans aucune publicité. La seule contrepartie est d'ouvrir un compte (sans abonnement) chez eux.
AJAX / XMLHTTPRequest
Tutorial sur les requêtes serveur en JavaScript
Avant d'entrer dans le vif du sujet, je tiens à remercier tous les habitués du forum de ToutJavaScript.com et notamment Aurélien pour son explication limpide sur les fonctions à retardement (j'espère les avoir bien utilisées) et poof65 pour sa collaboration lors de la création d'une classe d'abstraction des objets XMLHTTPRequest.
[1]
Opera est actuellement en train d'évoluer et devrait bientôt gérer
complètement ces objets. Au moment où j'écris ces lignes, les exemples
des sections 1. et 2. fonctionnent normalement sous Opera 8 beta.
L'exemple de la section 3. fonctionne mais le résultat arrive deux
fois. Celui de la section 4. ne fonctionne qu'avec la méthode get. Et le dernier, celui de la section 5. fait carrément planter l'application.
Accès rapide aux sections
1. Présentation
Comme leur nom ne l'indique pas, les objets XMLHTTPRequest permettent de récupérer toutes sortes de données, et pas seulement des fichiers XML. Pour effectuer une requête, il faut tout d'abord déclarer une certaine variable. Ce qui se fait de manière différente avec IE et Firefox. Sous IE, on utilise un objet ActiveX et sous Firefox, on dispose d'un type ad hoc.
Ensuite, on envoie la requête et enfin, on attend la réponse. Ci-après,
vous pouvez voir un exemple très basique faisant une requête sur la
présente page (location.href). Une fois la réponse obtenue, une boîte d'alerte s'affiche.
Comment ça marche ?
- ligne 4 : on crée une instance de l'objet XMLHTTPRequest sous Firefox ;
- ligne 6 : on crée une instance de l'objet XMLHTTPRequest sous IE ;
- ligne 12 : on spécifie la méthode de transmission des données, l'URL et le mode de transmission de la requête ;
- ligne 13 : on exécute la requête proprement dite ;
- ligne 14 : on affiche une boîte d'alerte dès que la requête est terminée.
2. À quoi cela peut-il servir ?
Dans l'exemple précédent, la requête se contente de demander un
certain fichier sans s'occuper du résultat. Mais en fait, lorsque la
requête se termine, on reçoit (et heureusement) des informations du
serveur. Ces informations sont contenues dans la variable xhr_object.responseText ou xhr_object.responseXML,
selon que le résultat est au format texte (il est possible de mettre
n'importe quoi dedans, tout est question d'interprétation ultérieure de
ce résultat) ou XML. Remplaçons simplement l'alerte de l'exemple précédent par alert(xhr_object.responseText) (cf. ligne 14) et voyons le résultat :Note : La section 5 présente un exemple concret d'utilisation.
3. Synchrone Vs. Asynchrone
Dans les exemples que nous avons vus jusqu'à maintenant, c'est le mode synchrone
qui était utilisé. Cela signifie que tant que le résultat de la requête
ne nous est pas parvenu, le script est en pause et le navigateur
bloqué. Avec un bon débit et/ou peu de données à transmettre, on
pourrait s'en contenter mais cela peut vite s'avérer gênant pour
l'utilisateur qui voit son navigateur figé. Ce mode de transmission est
donc à proscrire. Heureusement, il existe le mode asynchrone. Dans ce mode, après avoir envoyé la requête via send,
le script poursuit son exécution, sans bloquer le navigateur.
Évidemment, dans ce mode, il faut prévoir quelque chose pour nous
prévenir quand la requête a abouti. C'est le rôle de la fonction onreadystatechange (en fait, onreadystatechange
est une propriété et non une fonction, mais comme on lui affecte un
pointeur vers une fonction nous pouvons nous permettre cet abus de
langage). Prenons comme nouvel exemple une requête sur un simple
fichier texte :> Voir le contenu de foo.txt
Comment ça marche ?
C'est le troisième argument de la fonction open (cf. ligne 12) qui spécifie que le mode doit être asynchrone.L'objet xhr_object possède une propriété readyState (cf. ligne 15) qui prend successivement 5 valeurs récapitulées dans le tableau suivant :
| Valeur | Description |
|---|---|
| 0 (uninitialized) | non initialisé |
| 1 (loading) | début du transfert des données |
| 2 (loaded) | données transférées |
| 3 (interactive) | les données reçues sont accssibles en partie |
| 4 (complete) | les données sont complètement accessibles |
> Voir toutes les valeurs
4. Transmettre des données
Réaliser une requête et recevoir un résultat, c'est bien. Mais
réaliser une requête en transmettant des données c'est mieux. Les
données sont transmises de la même façon que lors de la soumission d'un
formulaire, c'est-à-dire via l'une des deux méthodes get ou post.
Évidemment, si on transmet des données, il faut que la requête porte
sur un fichier capable de les interpréter correctement. Dans l'exemple
suivant, nous allons envoyer deux chaînes de caractères au fichier strings2.php et celui-ci va nous les retourner « renversées ».> Voir le contenu de strings2.php
Comment ça marche ?
Tout commence en JS. Si la méthode sélectionnée est get, les données à transmettre sont concaténées à l'URL (cf. lignes 21-24) et si la méthode est post, elles sont envoyées via la fonction send (cf. ligne 42). Dans ce dernier cas, on doit aussi préciser l'encodage en spécifiant l'en-tête adéquat avec setRequestHeader (cf. ligne 40).Ensuite, côté PHP, les données sont reçues, quelle que soit la méthode de transmission et les chaînes sont renversées grâce à strrev (cf. lignes 3-12). Les données reçues via la méthode POST sont décodées grâce à utf8_decode sinon les caractères accentués sont mal interprétés. La chaîne affichée par le code PHP (et retournée, donc) est de la forme Données reçues en XXX:STRING1:STRING2: où XXX vaut soit GET soit POST et où STRING1 et STRING2 sont les chaînes renversées. On précise aussi, grâce à la fonction header le type des données qui vont être transférées depuis le serveur (ici, du texte utilisant le jeu de caractères iso-8859-1) (cf. ligne 1).
Enfin, côté JS, il ne reste plus qu'à séparer les données, avec split et à mettre les chaînes dans les champs correspondants (cf. lignes 30-34).
5. Exemple concret d'utilisation
Comme nous l'avons vu dans les exemples précédents, nous disposons
d'une grande liberté d'action avec cet outil. On peut simplement
afficher le résultat de la requête dans une boîte d'alerte. On peut
également l'afficher dans un div (ou tout autre élément HTML). Mais on peut tout aussi bien, si la chaîne récupérée représente du code JS, exécuter ce code grâce à eval.Voici un exemple dans lequel une liste déroulante est peuplée en fonction du choix réalisé dans une première liste. Le code JS qui permet de remplir la seconde liste est généré côté serveur, suite à une requête MySQL et simplement évalué côté client.
> Voir le contenu de species.php
> Voir la table « Animals »
Comment ça marche ?
Dans cet exemple, seules les notions couvertes dans les sections 1.
à 4. sont utilisées, ainsi que quelques notions élémentaires de JS et de PHP. Vous devriez donc logiquement pouvoir comprendre le code par vous-même. Si, si, j'en suis sûr.
6. Propriétés et méthodes
Cette section n'est pas exhaustive. Elle présente les propriétés et
méthodes les plus utiles, même s'il est vrai que cette notion est assez
subjective. Pour une liste complète, je vous invite à consulter la MSDN
dont un lien est donné en section 7.
Propriétés
- onreadystatechange : Spécifie la fonction à appeler lorsque la propriété readyState varie. lecture/écriture. (Cf. section 3 pour les valeurs)
- readyState : Représente l'état d'avancement de la requête. lecture seule.
- responseText : Chaîne de caractères contenant la réponse à la requête. lecture seule.
- responseXML : Objet XML contenant la réponse à la requête. lecture seule.
- status : Représente le code HTTP retourné par la requête. lecture seule. (Cf. section 3 pour les valeurs)
Méthodes
- abort() : Annule la requête courante.
- getAllResponseHeaders() : Retourne les noms et les valeurs de tous les en-têtes HTTP sous forme d'une chaîne.
- getResponseHeader(headerName) : Récupère la valeur d'un certain en-tête HTTP (headerName) sous forme d'une chaîne.
- open(method, url[, asynchrone[, user[, password]]]) : Initialise une requête en spécifiant la méthode (method), l'URL (url), si le mode est asynchrone (asyncFlag vaut true ou false) et en indiquant d'éventuelles informations d'identification (user et password).
- send(data) : Envoie la requête HTTP au serveur en transmettant éventuellement des données (data doit alors être différent de null) sous forme d'une « postable string » (je suis preneur pour une traduction) ou sous forme d'un objet DOM.
- setTimeouts(timeout) : Spécifie la durée maximale (timeout) accordée à une requête pour quelle s'effectue complètement.
- setRequestHeader(headerName, headerValue) : Spécifie un en-tête HTTP (headerName et headerValue) à envoyer avec la requête.
7. Quelques liens
Des exemples d'utilisation :
- Une petite page de démonstration (qui perd un peu de son sens face à ce tutorial) :
http://robloche.free.fr/javascript/js_request/test.html - Et
voici le concept poussé un plus loin, avec un jeu de morpion acceptant
un grand nombre de participants (enfin, deux par jeu, quand même). J'ai
écrit dans ce but une classe d'abstraction qui permet de manipuler ces
objets sans se soucier du navigateur. Cette classe constitue une
surcouche aux objets XMLHTTPRequest et permet de réaliser certaines opérations complexes en ne fournissant que quelques paramètres :
http://robloche.free.fr/javascript/morpion/morpion.php - Une
nouvelle mouture de Google, actuellement en version beta, propose des
suggestions pour votre recherche, en utilisant cette technique :
http://www.google.com/webhp?complete=1&hl=en - Et bien sûr, tout ceux qui ont un compte Gmail savent à quel point il est fait un usage intensif de cette technologie :
http://gmail.google.com - Depuis quelques mois, on voit régulièrement fleurir de nouvelles utilisations de ces requêtes JS sur le net. Et ça ne risque pas de s'arrêter, tant il est vrai que ça simplifie la vie des visiteurs. Observez bien les sites que vous fréquentez et essayez de deviner s'ils utilisent cette technique.
D'autres liens utiles :
- La page de la MSDN détaillant toutes les méthodes et propriétés des objets XMLHTTPRequest :
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjpmeserverxmlhttp.asp - Un article intitulé Dynamic HTML and XML: The XMLHttpRequest Object sur developer.apple.com :
http://developer.apple.com/internet/webcontent/xmlhttpreq.html - Une page traitant également du sujet sur www.mozilla.org :
http://www.mozilla.org/xmlextras/ - Un article intitulé Using the XML HTTP Request object introduisant ces mêmes objets :
http://jibbering.com/2002/4/httprequest.html - Comme
vous l'avez remarqué, tous les codes visibles sur cette page présentent
une coloration syntaxique bien sympatique. Celle-ci est faite en JS et CSS grâce à un bel outil (compatible IE et Firefox) créé par Dream Projections Inc. :
http://www.dreamprojections.com/SyntaxHighlighter/Default.aspx
Les erreurs fréquentes
Cet article est destiné à vous aider à résoudre vos problèmes de scripts.
Il se compose de 4 pages :
- La liste des erreurs courantes (cette page),
- Les réponses à apporter aux erreurs de syntaxe,
- Les réponses à apporter aux anomalies de fonctionnement,
- Une aide pour commencer le débug.
- La liste des erreurs courantes (cette page),
- Les réponses à apporter aux erreurs de syntaxe,
- Les réponses à apporter aux anomalies de fonctionnement,
- Une aide pour commencer le débug.
|
Comment débugger On peut distinguer deux types d'erreurs :
Une seconde liste présente les fonctionnements anormaux des scripts et les moyens d'y remédier. La liste des erreurs courantes Comment repérer le message d'erreur retourné par le navigateur? Retrouvez votre message d'erreur et voyez la réponse à apporter pour débugger.
Les fonctionnements anormaux Un fonctionnement anormal n'est pas une erreur détectée par le navigateur, mais une erreur de conception ou d'écriture qui donne des résultats différents de ceux attendus.
|
Deux exemples pour commencer
Ce tutorial a pour objet de vous montrer comment les expressions régulières fonctionnent et surtout à quoi elles servent.
C'est aussi l'occasion pour moi de les apprendre une fois pour toute, car leur puissance dépasse largement leur difficulté :)
Avant de voir comment programmer les expressions régulières, je pense qu'il faut d'abord voir à quoi cela peut servir !
Les expressions régulières permettent de réaliser des traitements sur des chaînes de caractères, traitements qui peuvent être assez complexes à réaliser sans l'aide de ces fameuses expressions.
1er exemple : Trouver des mots dans un texte
Comment savoir si un mot est présent dans un texte. Voici le code correspondant :
function SearchRegExp1(f) {
var lemot = f.mot.value
var exp=new RegExp(lemot,"g");
if ( exp.test(f.texte.value) ) {alert("Le mot ["+lemot+"] a été trouvé :)"); }
else {alert(" E R R E U R !\n\nLe mot ["+lemot+"] n'est pas présent !!!!"); }
}
2ème exemple : Est-ce un login valide ?
La principale utilité des expressions régulières en javascript est de vérifier la saisie dans un formulaire.
Cette fonction vérifie que le login saisi est bien formaté : de 3 à 8 caractères et sans caractères spéciaux (uniquement des chiffres et des lettres).
Voici le code correspondant :
function VerifLogin(login) {
var exp=new RegExp("^[a-zA-Z0-9]{3,8}$","g");
if ( exp.test(login) ) {alert("Le login ["+login+"] est valide :)"); }
else {alert(" E R R E U R !\n\nLe login ["+login+"] n'est pas valide !!!!"); }
}
Inscription à :
Commentaires (Atom)