Et maintenant, on fait quoi ? (Conclusion)

Résumons ce qu'on a vu

1. Partie I : les bases du XHTML. Après une brève introduction sur les logiciels à utiliser (Bloc-Notes, Notepad++) et sur les navigateurs (Internet Explorer, Firefox etc...), nous avons commencé à réaliser nos premières pages web entièrement en XHTML
   Nous avons appris quelle était la structure de base d'une page XHTML, comment écrire du texte dedans, comment faire des liens et enfin comment insérer des images.
   
   
   
   Eh Simone, viens voir ! J'ai réussi à créer un lien !
   
   Dans cette partie, j'ai volontairement évité de vous parler du langage CSS. Certes, les pages web que nous faisions étaient sacrément moches, mais cela vous a permis d'apprendre un seul langage à la fois pour commencer.
   
2. Partie II : c'est plus joli avec du CSS !. Au bout d'un moment, il a fallu commencer à parler de CSS, c'était inévitable. Lorsque j'ai estimé que vous aviez assez de connaissances en XHTML, nous avons attaqué le CSS.
   Les chapitres étaient assez gros, je le reconnais, et le challenge était de taille. En effet, une fois les principes de base du CSS acquis, il vous fallait tout simplement... apprendre des tas et des tas de propriétés CSS. D'où l'impression de lourdeur que vous avez pu ressentir lors de la partie II.
   
   
   
   Avec le CSS, fini les sites en Noir & Blanc !
   
   J'ai fait de mon mieux pour éviter que ces chapitres ne soient trop répétitifs, mais c'est le langage qui est construit comme ça, je n'ai rien inventé. Toutefois, cela aura eu un aspect positif : à force de vous bourrer le crâne, il y a bien des choses qui auront réussi à rentrer
   Et ça c'était déjà pas mal
   
3. Partie III : XHTML & CSS, toujours plus forts !. Il a fallu ensuite passer à la vitesse supérieure. Dans cette partie, XHTML & CSS étaient tous deux omniprésents, et le moins que l'on puisse dire est qu'il a fallu s'accrocher.
   Bon d'accord, le premier chapitre sur les listes à puces n'était qu'une petite entrée en matière pour que vous voyiez de quelle manière XHTML & CSS se complètent sur une page web.
   Mais ensuite sont venus les chapitres sur les blocks, le positionnement CSS... et là c'était le vrai "point chaud" du tutoriel. C'était délicat et pourtant indispensable si vous vouliez ensuite créer le design de votre page web.
   
   
   
   Voilà mon site fin prêt à conquérir le Monde !
   
   Après avoir vu le fonctionnement des tableaux, nous nous sommes finalement arrêtés sur les formulaires. Un chapitre qui, vous vous en serez doutés, n'a pas été placé là par hasard. C'était en effet un chapitre frustrant car vous ne pouviez que créer le formulaire, mais vous n'êtiez pas (et n'êtes toujours pas) capables de récupérer les informations entrées par le visiteur.
   

Ce qu'on n'a pas vu

• Alsacréations
• OpenWeb

• Les langages "client" : ce sont des langages exécutés par les ordinateurs de vos visiteurs. En gros, ce seront les ordinateurs de vos visiteurs qui feront les calculs pour réaliser certains effets.
  Parmi les langages client, on connaît surtout le Javascript, dont vous avez très probablement entendu parler car il est très populaire. Je vous ferai un petit speech dessus un peu plus bas.
• Les langages "serveur" : là, c'est un peu plus sérieux. Ce sont des langages qui s'exécutent sur une machine appelée le "serveur". C'est une sorte de gros ordinateur que vous n'avez jamais vu de votre vie et dont le seul travail consiste... à distribuer votre site web aux visiteurs.
  Les langages serveur sont plus complexes, mais aussi beaucoup beaucoup plus puissants que les langages client.
  Il existe plusieurs langages serveur :
  
  • Le PHP : très populaire, vous en avez peut-être entendu parler... Ah oui je suis bête, c'est moi qui vous en parle depuis tout à l'heure sans vous dire ce que c'est
    Ce qu'il faut retenir pour le moment, c'est que le PHP est très populaire chez les webmasters qui ont un peu d'expérience car c'est un langage gratuit et puissant.
    
  • L'ASP : ce langage est moins courant et se fait voler la vedette par PHP. L'ASP a été développé par une entreprise que vous connaissez bien : Microsoft. Et comme Microsoft fait rarement les choses gratuitement...
    L'ASP a donc moins de succès que le PHP parce qu'il coûte cher, et je suis sûr que vous n'avez pas envie de payer pour créer votre site web (c'est un sentiment tout à fait humain, il ne faut pas en avoir honte )
    Au final, ce sont surtout les entreprises qui utilisent l'ASP. Et encore... beaucoup d'entre elles se mettent au PHP, qui est globalement aussi puissant que l'ASP en plus d'être gratuit.
    
  Il existe d'autres langages côté serveur, comme le Perl, mais comme je ne les connais pas vraiment je vais éviter de vous dire des bêtises dessus
  Ces langages sont en général plus anciens que le PHP, peut-être un peu moins maniables aussi, en tout cas c'est l'impression que j'en ai. Maintenant que le PHP est là, on n'a pratiquement plus recours à ces "vieux" langages.
  

Un langage client : le Javascript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

function switch_spoiler(div2)
{
	if (div2.getElementsByTagName('div').length > 0)
	var divs = div2.getElementsByTagName('div');
	else
	var divs = div2.parentNode.nextSibling.getElementsByTagName('div');
var div3 = divs[0];

	if (div3.style.visibility == 'visible')
	div3.style.visibility = 'hidden';
	else
	div3.style.visibility = 'visible';
return false;
}

• On l'utilisera le plus souvent pour modifier des propriétés CSS sans avoir à recharger la page.
  Par exemple, vous pointez sur une image et le fond de votre site change de couleur (c'est pas possible à faire avec un :hover car ça concerne 2 balises différentes, c'est bien là une limite du CSS).
• On peut l'utiliser aussi pour modifier la source XHTML sans avoir à recharger la page.
• Il permet aussi d'afficher des boîtes de dialogue à l'écran du visiteur.
• Ou encore de modifier la taille de la fenêtre.

• Ce tutoriel sur Javascript, un bon point de départ pour commencer.
• Ce tutoriel sur AJAX, à lire si vous avez déjà manipulé un peu de Javascript avant et que vous voulez aller plus loin.
• Le sommaire de la catégorie Javascript, qui vous présente tous les cours Javascript disponibles sur le Site du Zéro.

Un langage serveur : le PHP

• Livre d'or
• Forums
• Newsletter
• Chat
• Compteur de visiteurs
• Système de news automatisé
• Système de membres
• Jeux PHP sur son site web (jeux de stratégie, élevage d'animaux virtuels...)
• Le café (ah non ça il sait pas faire c'est vrai)
• ... Je continue ou je peux arrêter là ?

L'éléPHPant

• Les sites en XHTML + CSS (vous savez faire maintenant) : ces sites fonctionnent très bien, mais pour les mettre à jour il vous faut systématiquement modifier le code XHTML & CSS. Ces sites sont en général simples, et le plus souvent il s'agit de petits sites.
  Un site en XHTML & CSS est dit statique, car il ne se modifie pas sans votre intervention.
• Les sites en XHTML + CSS + PHP : avec l'ajout du PHP, le site peut être en grande partie automatisé. Une fois le code XHTML, CSS et PHP mis en place, vous n'avez (presque) plus besoin de toucher le code source de votre site. Par exemple, pour ajouter une news vous avez juste besoin de compléter un formulaire et de cliquer sur "Valider" !
  Un site en XHTML, CSS et PHP est dit dynamique car c'est un site qui n'a pas vraiment besoin de votre intervention pour évoluer. Un site dynamique est beaucoup plus attrayant et facile à mettre à jour, ce qui explique pourquoi la plupart des gros sites utilisent le PHP.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<?php
// Connexion à MySQL
mysql_connect("localhost", "sdz", "mot_de_passe");
mysql_select_db("coursphp");
 
// -------
// ETAPE 1 : on vérifie si l'IP se trouve déjà dans la table
// Pour faire ça, on n'a qu'à compter le nombre d'entrées dont le champ "ip" est l'adresse ip du visiteur
$retour = mysql_query('SELECT COUNT(*) AS nbre_entrees FROM connectes WHERE ip=\'' . $_SERVER['REMOTE_ADDR'] . '\'');
$donnees = mysql_fetch_array($retour);
 
if ($donnees['nbre_entrees'] == 0) // L'ip ne se trouve pas dans la table, on va l'ajouter
{
    mysql_query('INSERT INTO connectes VALUES(\'' . $_SERVER['REMOTE_ADDR'] . '\', ' . time() . ')');
}
else // L'ip se trouve déjà dans la table, on met juste à jour le timestamp
{
    mysql_query('UPDATE connectes SET timestamp=' . time() . ' WHERE ip=\'' . $_SERVER['REMOTE_ADDR'] . '\'');
} 
?>