Introduction à la programmation web (1/3) et l'art de bien utiliser ce site

Votre site jojolafripouille.free.fr est en HTML made in FrontPage. Vous voudriez bien le dynamiser un peu : ajouter des news, un forum etc, mais vous n'y comprenez rien, çà n'est pas votre métier. Qu'est ce qu'un langage dynamique, à quoi celà sert-il, par où commencer? A la vue des questions (répétitives) des nouveaux arrivants sur le site, il est temps de faire le point et de vous montrer qu'ici vous avez tout pour faire des merveilles! Alors on relève ses manches, et on se dit qu'on peut y arriver, tout le monde a bien dû commencer un jour, avec de la volonté, un peu de temps, vous y arriverez!

Langages dynamiques - Lesquels? - Pourquoi?

Qu'est ce qu'un langage statique ou côté client?

C'est un langage qui n'utilise pas de serveur pour éxecuter son code, ex : HTML, Javascript, pour éxecuter une page en HTML simple qui est sur votre bureau, il vous suffit de double-cliquer dessus pour voir le résultat.

Qu'est ce qu'un langage dynamique ou côté serveur?

C'est un langage qui DOIT utiliser un serveur pour éxecuter son code, ex : ASP, PHP, CGI, ASP.net, JSP, CFM etc, pour éxecuter une page dans un de ces langages, vous DEVEZ avoir un serveur web (IIS, Apache, etc) PLUS un module qui retranscrira les commandes du langage en actions que vous ne verrez pas (ex : envoi de mail, ajout dans une base) et en code HTML que vous renverra le serveur web à l'écran.

Qu'est ce qu'une page dynamique?

C'est une page qui utilise les langages statiques : HTML/CSS pour la mise en page, Javascript pour vérifier un formulaire avant envoi par ex, et un langage dynamique, par ex PHP qui vient se connecter à une base de données pour lister les inscrits d'une newsletter.
La page affichée à l'écran est donc renvoyée par le serveur, après passage à la moulinette, sous forme HTML simple. Pour preuve cette page-ci, les titres, contenus, liens, pubs, tout est orchestré dynamiquement en PHP, mais si vous faîte un clic-droit puis afficher la source, vous ne verrez que du code HTML!

Les différents langages dont traite ce site sont :
- en statique : HTML, JavaScript, VBScript, VML
- en dynamique : ASP, PHP, ASP.net

Point important : dans une page homogène comprenant HTML, Javascript et un langage côté serveur, (ex : PHP), le code PHP sera toujours éxecuté AVANT tout autre code et de haut en bas, ex : le serveur analyse la page, trouve des instructions PHP en haut et en bas de page, il les éxecute, et renvoit une page HTML contenant en haut le résultat HTML des instructions, le milieu de la page qui était du code HTML, donc renvoyé tel quel, on n'y touche pas, puis le bas de page, éxecuté et renvoyé également en HTML.

Que peut on faire avec ces langages?

Un livre d'or, un forum, redimensionner des images (créer des vignettes), envoyer des fichiers, des mails, gérer un panier d'achat pour un site ecommerce, créer des compteurs en utilisant des cookies, interagir avec des animations en Flash, récupérer les informations postées à partir d'un formulaire, faire une zone 'membre' protégée etc...

Les bases de données

Mais c'est vraiment en couplant ces langages avec une base de données que l'on en tire la quintessence et que les choses deviennent vraiment intéressantes!

A quoi ca sert?

A regrouper des données ayant des points communs sous forme d'enregistrements contenant des champs, regroupés en collections (tables), collections qui peuvent avoir des relations avec une ou plusieurs autres collections.

Exemples :

- un livre d'or; il contient des messages de sympathie ou non :), tous ces messages sont de même forme : le nom de l'auteur, son email, et son message.
- un annuaire de membres; à l'identique tous les membres seront caractérisés par leur nom, prénom, email, âge, et photo.
- les articles d'une boutique; tous ont une désignation, une référence, une description, un prix, une photo etc...

Ces points communs sont matérialisés sous forme de champs.

En pratique : pour ma boutique en ligne, je vais avoir une base de données, appelée 'boutique', qui contiendra plusieurs collections ou tables : une appelée 'clients' qui contient la liste de mes clients qui lors de leurs inscriptions ont rempli plusieurs champs : nom, prenom, adresse etc, une autre appelée 'articles' qui liste mes articles comme vu ci-dessus, et une dernière nommée 'commandes' : un client passe commande d'articles, vous voyez la relation entre les 3 : client, commande, article? :) Réfléchir au regroupement des données, aux différentes relations, aux types de champs enregistrables c'est de la conception de BD.

Pour créer ces exemples, on utilisera l'HTML pour la mise en forme de notre page, ASP ou PHP pour gérer un formulaire d'envoi dans lequel l'internaute remplira des champs, et des requêtes SQL pour insérer ce nouvel enregistrement dans notre base de données. On utilisera à nouveau une requête SQL conjointement à du code ASP ou PHP pour lister tous nos messages du livre d'or.

Qu'est ce que SQL?

Structured Query Language : c'est un langage (encore!) d'interrogation (requête) de bases de données. Il ne sert qu'à çà. A partir d'un langage comme ASP ou PHP on se connecte à notre base de données, on effectue un lien, on demande ensuite grâce à une requête SQL de sélectionner des résultats, d'en ajouter, d'en modifier ou d'en effacer, suivant des critères sur les champs ou non, de les classer, de les ordonner.
Si je reprend mon exemple d'annuaire, je vais construire (pour rester simple) 2 pages : une qui permet d'ajouter des données grâce à un formulaire qui demandera à la personne d'entrer son nom, prénom, email, âge, et photo; et une autre page qui listera tous les membres.
Dans la 1ere page j'utiliserais donc une requête d'insertion : on ajoute un enregistrement.
Dans la seconde page j'utiliserais une requête de sélection : on veut lister tous les enregistrements.

Les requêtes peuvent devenir tres complexes : demander la liste des clients dont le nom commence par la lettre "J", qui habitent à Paris, qui ont commandé l'article référencé "512GH" entre le 1er Juillet et le 1er Septembre, et dont le prix total de la commande se situe entre 100 et 200 euros, puis les classer par montant de la commande, dans l'exemple de la boutique.


Questions fréquentes :

- Comment écrire une page dynamique, avec quel outil? quel éditeur?
Comme une page HTML, c'est un fichier qui ne comprend que du texte, des balises et des commandes. Le notepad peut donc suffir, mais il existen bien entendu des outils plus avancés qui peuvent vous aider à programmer de manière visuelle vos pages avec des drag'n'drop, vous en trouverez une liste ici mais également Dreamweaver pour ASP ou PHP ou encore WebMatrix pour .Net.

- Je voudrais essayer chez moi tranquillement sans acheter d'hébergement?
C'est bien évidemment possible. Il faut installer un serveur web ainsi que les modules : IIS pour programmer en ASP, ASP.net ou PHP, ou Apache pour faire du PHP.

- Où écrire mon code ASP ou PHP et HTML,à quel endroit?
Le code ASP ou PHP s'écrit à l'endroit précis où l'action doit s'effectuer. Celà peut être au milieu d'un tableau, d'un texte, au début, à la fin de lapage, n'importe où, là où vous en avez besoin.

- Avant d'insérer des commandes ASP ou PHP, mon code HTML marchait bien sur Netscape et là plus rien?
L'éxecution des commandes ASP ou PHP ne fait rien d'autre que de produire et renvoyer du code HTML comme VOUS le lui demandez. C'est à vous de rendre compatible votre code, le serveur ne renvoit que ce qu'on lui demande renvoyer.