Cours html php complet avec exemples d'application
...
Comment fonctionne un site web ?
Lorsque vous voulez visiter un site web, vous tapez son adresse dans votre navigateur web, que ce soit Mozilla Firefox, Internet Explorer, Opera, Safari ou un autre. Mais ne vous êtesvous jamais demandé comment faisait la page web pour arriver jusqu'à vous ? Il faut savoir qu'internet est un réseau composé d'ordinateurs. Ceux-ci peuvent être classés en deux catégories :
La plupart du temps, le serveur est dépourvu d'écran : il reste allumé et travaille tout seul sans intervention humaine, 24h/24, 7j/7. Un vrai forçat du travail. On résume : votre ordinateur est appelé le client, tandis que l'ordinateur qui détient le site web est appelé le serveur. Comment les deux communiquent-ils ? C'est justement là que se fait la différence entre un site statique et un site dynamique. Voyons voir ensemble ce qui change.
Cas d'un site statique
Lorsque le site est statique, le schéma est très simple. Cela se passe en deux temps :
La communication est donc plutôt basique :
Sur un site statique, il ne se passe rien d'autre. Le serveur stocke des pages web et les envoie aux clients qui les demandent sans les modifier.
Cas d'un site dynamique
Lorsque le site est dynamique, il y a une étape intermédiaire : la page est générée.
La page web est générée à chaque fois qu'un client la réclame. C'est précisément ce qui rend les sites dynamiques vivants : le contenu d'une même page peut changer d'un instant à l'autre. C'est comme cela que certains sites parviennent à afficher par exemple votre pseudonyme sur toutes les pages. Étant donné que le serveur génère une page à chaque fois qu'on lui en demande une, il peut la personnaliser en fonction des goûts et des préférences du visiteur (et afficher entre autres son pseudonyme).
Les langages du Web
Lorsqu'on crée un site web, on est amené à manipuler non pas un mais plusieurs langages. En tant que webmaster, il faut impérativement les connaître. Certains programmes, appelés WYSIWYG (What You See Is What You Get), permettent d'aider les plus novices à créer un site web statique sans connaître les langages informatiques qui se cachent derrière... Mais pour réaliser un site dynamique comme nous le souhaitons, nous devrons absolument mettre les mains dans le cambouis.
Pour un site statique : XHTML et CSS
De nombreux langages ont été créés pour produire des sites web. Deux d'entre eux constituent une base incontournable pour tous les webmasters :
Code : HTML - 1
Bonjour, je suis un paragraphe de texte !
Code : CSS -
div.banner {
text-align: center;
font-weight: bold;
font-size: 120%;
}
Ces langages sont la base de tous les sites web. Lorsque le serveur envoie la page web au client, il envoie en fait du code en langage XHTML et CSS. Le serveur envoie du XHTML et du CSS au client Le problème, c'est que lorsqu'on connaît seulement XHTML et CSS, on ne peut produire que des sites statiques... et pas des sites dynamiques ! Pour ces derniers, il est nécessaire de manipuler d'autres langages en plus de XHTML et CSS. La question qu'il faut vous poser est donc : connaissez-vous XHTML et CSS ? Si oui, c'est parfait, vous pouvez continuer car nous en aurons besoin par la suite. Si la réponse est non, pas de panique. Ces langages ne sont pas bien difficiles, ils sont à la portée de tous. Vous pouvez les apprendre en lisant mon cours sur XHTML et CSS. Sachez qu'apprendre ces langages n'est l'affaire que de quelques petites semaines, voire même moins si vous avez suffisamment de temps libre.
Pour un site dynamique : ajoutez PHP et MySQL
Quel que soit le site web que l'on souhaite créer, XHTML et CSS sont donc indispensables. Cependant, ils ne suffisent pas pour réaliser des sites dynamiques. Il faut les compléter avec d'autres langages.
C'est justement tout l'objet de ce cours : vous allez apprendre à manipuler PHP et MySQL pour réaliser un site web dynamique.
Code : PHP - Sélectionner
1
MySQL : c'est ce qu'on appelle un SGBD (Système de Gestion de Base de Données). Pour faire simple, son rôle est d'enregistrer des données de manière organisée afin de vous aider à les retrouver facilement plus tard. C'est grâce à MySQL que vous pourrez enregistrer la liste des membres de votre site, les messages postés sur le forum, etc. Le langage qui permet de communiquer avec la base de données s'appelle le SQL. Voici un code en langage SQL :
Code : SQL - Sélectionner
1 SELECT id, auteur, message, datemsg FROM livreor ORDER BY datemsg DESC LIMIT 0, 10
PHP et MySQL sont ce qu'on appelle des logiciels libres. Entre autres choses, cela vous donne des garanties de pérennité : tout le monde peut contribuer à leur développement, vous ne risquez donc pas de voir tous les webmasters se désintéresser du PHP et de MySQL du jour au lendemain, et ça c'est très important !
D'autre part, PHP et MySQL sont disponibles gratuitement. Cela signifie une chose essentielle : vous n'aurez pas à débourser un centime pour construire votre site web !
PHP peut fonctionner seul et suffit à créer un site dynamique, mais les choses deviennent réellement intéressantes lorsqu'on le combine à un SGBD tel que MySQL. Cependant pour simplifier, oublions pour le moment MySQL et concentrons-nous sur PHP.
PHP génère du XHTML
Les clients sont incapables de comprendre le code PHP, ils ne connaissent que le XHTML et le CSS. Seul le serveur est capable de lire du PHP.
Le rôle de PHP est justement de générer du code XHTML (on peut aussi générer du CSS, mais c'est plus rare), code qui est ensuite envoyé au client de la même manière qu'un site statique :
PHP décide ce qui va être affiché sur la page web envoyée au visiteur
PHP est un langage de programmation utilisé sur de nombreux serveurs pour prendre des décisions. C’est PHP qui décide du code XHTML qui sera généré et envoyé au client à chaque fois.
Pour bien comprendre l’intérêt de tout cela, prenons un exemple. On peut écrire en PHP : "Si le visiteur est membre de mon site et qu’il s’appelle Jonathan, affiche Bienvenue Jonathan sur la page web. En revanche, si ce n’est pas un membre de mon site, affiche Bienvenue à la place et propose au visiteur de s’inscrire."
C'est un exemple très basique de site dynamique : selon que vous êtes un membre enregistré ou pas, vous ne verrez pas les mêmes choses et n'aurez peut-être pas accès à toutes les sections.
Et la concurrence ?
XHTML et CSS n'ont pas de concurrents car ce sont des standards. Tout le monde est censé les connaître et les utiliser sur tous les sites web.
En revanche, pour ce qui est des sites dynamiques, PHP et MySQL sont loin d'être les seuls sur le coup. Je ne peux pas vous faire une liste complète de leurs concurrents, ce serait bien trop long (et ennuyeux !). Cependant, pour votre culture générale il faut au moins connaître quelques autres grands noms.
Tout d'abord, si on a souvent tendance à combiner PHP et MySQL pour réaliser de puissants sites dynamiques, il ne faut pas mélanger les deux. Le premier a des concurrents différents du second.
Les concurrents de PHP
Parmi les concurrents de PHP, on peut citer :
ASP .NET : conçu par Microsoft, il exploite le framework .NET bien connu des développeurs C# (un framework est un ensemble de bibliothèques qui fournissent des services pour les développeurs). Ce langage peut être intéressant si vous avez l'habitude de développer en C# .NET et que vous ne voulez pas être dépaysés.
Ruby on Rails : très actif, ce framework s'utilise avec le langage Ruby et permet de réaliser des sites dynamiques rapidement en suivant certaines conventions.
Django : il est similaire à Ruby on Rails, mais il s'utilise en langage Python.
Java et les JSP (Java Server Pages) : plus couramment appelé "JEE", il est particulièrement utilisé dans le monde professionnel. Il demande une certaine rigueur. La mise en place d'un projet JEE est traditionnellement un peu plus longue et plus lourde mais le système est apprécié des professionnels et des institutions (c'est ce qui est utilisé sur le site des impôts français par exemple).
Je ne peux pas présenter ici tous les concurrents, mais ceci devrait déjà vous donner une bonne idée. Pour information, il est aussi possible d'utiliser par exemple le langage C ou le C+
+, bien que ce soit plus complexe et pas forcément toujours très adapté (en clair, je ne le recommande pas du tout ).
Lequel choisir dans le lot ? Lequel est le meilleur ?
Étant donné l'objet de ce cours, vous vous attendez à ce que je vous réponde instantanément "PHP !". Mais non. En fait, tout dépend de vos connaissances en programmation. Si vous avez déjà manipulé le Java, vous serez plus rapidement à l'aise avec les JSP. Si vous connaissez Python, Django semble tout indiqué.
Quant à PHP, il se démarque de ses concurrents par une importante communauté qui peut vous aider rapidement sur internet si vous avez des problèmes. C'est un langage facile à utiliser, idéal pour les débutants comme pour les professionnels : Wikipédia et Facebook sont des exemples de sites célèbres et très fréquentés qui fonctionnent grâce à PHP.
Bref, il n'y a pas de meilleur choix. Je vous recommande le langage pour lequel vous serez le plus certain d'avoir quelqu'un pour vous aider. Le PHP en ce sens est souvent un très bon choix.
Les concurrents de MySQL
En ce qui concerne les bases de données, le choix est là encore très vaste.
Cependant, alors que PHP et ses concurrents sont la plupart du temps libres et gratuits, ce n'est pas le cas de la plupart des SGBD.
Parmi les concurrents de MySQL, je vous conseille de connaître (au moins de nom) :
Oracle : c'est le SGBD le plus célèbre, le plus complet et le plus puissant. Il est malheureusement payant (et cher), ce qui le réserve plutôt aux entreprises qui l'utilisent déjà massivement. Il existe cependant des versions gratuites d'Oracle notamment pour ceux qui veulent apprendre à s'en servir.
Microsoft SQL Server : édité par Microsoft, on l'utilise souvent en combinaison avec ASP .NET, bien qu'on puisse l'utiliser avec n'importe quel autre langage. Il est payant, mais il existe des versions gratuites limitées.
PostgreSQL : il s'agit d'un SGBD libre et gratuit comme MySQL, qui propose des fonctionnalités plus avancées. Parfois comparé à Oracle, il lui reste cependant du chemin à parcourir. Il dispose d'une communauté un peu moins importante que MySQL et Oracle. Le Site du Zéro utilise PostgreSQL.
SQLite : le SGBD le plus simple et le plus petit. Il est libre et gratuit mais dispose de très peu de fonctionnalités (ce qui suffit parfois). Son gros avantage est d'être très léger.
Là encore, cette liste est loin d'être exhaustive mais vous présente au moins quelques grands noms.
Pour information, MySQL reste de loin le SGBD libre et gratuit le plus utilisé. Parmi les solutions professionnelles payantes, Oracle est le plus avancé et le plus répandu mais son utilisation est surtout réservée aux grosses entreprises.
En fin de compte, si vos moyens sont limités, vous n'avez pas beaucoup de choix pour le SGBD. MySQL est le plus indiqué car il est libre, gratuit, performant et utilisé par de nombreuses personnes qui sont susceptibles de vous aider.
Plusieurs combinaisons sont possibles
Comme vous avez pu le constater, vous avez le choix entre de nombreux outils pour réaliser un site dynamique. La plupart d'entre eux sont gratuits.
Sachez que vous pouvez a priori combiner ces outils comme bon vous semble. Par exemple, on peut très bien utiliser PHP avec une autre base de données que MySQL, telle que Oracle ou PostgreSQL. De même, MySQL peut être utilisé avec n'importe quel autre langage : Java, Python, Ruby, etc.
Cependant, la combinaison "PHP + MySQL" est probablement la plus courante. Ce n'est pas par hasard si ce cours traite de ces deux outils qui ont fait leurs preuves.
Haut du formulaire
Q.C.M.
Je veux réaliser un site vitrine qui présente simplement mon entreprise de plomberie, avec quelques photos et mes tarifs. Est-ce que mon site sera statique ou dynamique ?
Statique
Dynamique
Lorsqu'on crée un site statique, lequel de ces langages ne nous est pas utile ?
XHTML
CSS
PHP
Comment appelle-t-on l'ordinateur qui stocke et délivre le site web aux visiteurs ?
Le client
Le serveur
Le fournisseur
Quel est le rôle d'une base de données ?
Générer des pages XHTML personnalisées pour les visiteurs
Envoyer des données de façon sécurisée sur internet
Stocker des données de manière organisée
...
De quels programmes a-t-on besoin ?
Selon que l'on crée un site statique ou un site dynamique, on a besoin de logiciels différents. En fait, faire un site dynamique nécessite hélas pour nous un peu plus de logiciels !
Avec un site statique
Les webmasters qui créent des sites statiques avec XHTML et CSS ont de la chance, ils ont en général déjà tous les programmes dont ils ont besoin :
Mozilla Firefox
Un éditeur de texte : en théorie un programme tel que le Bloc-Notes livré avec Windows suffit, bien qu'il soit recommandé d'utiliser un outil un peu plus évolué comme Notepad++. Nous reparlerons du choix de l'éditeur à la fin de ce chapitre.
Un navigateur web : il permet de tester la page web. Vous pouvez utiliser par exemple Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, ou tout autre navigateur auquel vous êtes habitué pour aller sur le web. Il est conseillé de tester son site régulièrement sur différents navigateurs.
Cependant, pour ceux qui comme nous travaillent sur des sites dynamiques, ces outils ne suffisent pas. Il est nécessaire d'installer des programmes supplémentaires.
Avec un site dynamique
Pour que votre ordinateur puisse lire du PHP, il faut qu'il se comporte comme un serveur. Rassurez-vous, vous n'avez pas besoin d'acheter une machine spéciale pour cela : il suffit simplement d'installer les mêmes programmes que ceux que l'on trouve sur les serveurs qui délivrent les sites web aux internautes.
Ces programmes dont nous allons avoir besoin, quels sont-ils ?
Logo d'Apache
Apache : c'est ce qu'on appelle un serveur web. Il s'agit du plus important de tous les programmes, car c'est lui qui est chargé de délivrer les pages web aux visiteurs. Cependant, Apache ne gère que les sites web statiques (il ne peut traiter que des pages HTML). Il faut donc le compléter avec d'autres programmes.
PHP : c'est un plug-in pour Apache qui le rend capable de traiter des pages web dynamiques en PHP. En clair, en combinant Apache et PHP, notre ordinateur sera capable de lire des pages web en PHP.
MySQL : c'est le logiciel de gestion de base de données dont je vous ai parlé en introduction. Il permet d'enregistrer des données de manière organisée (comme la liste des membres de votre site). Nous n'en aurons pas besoin immédiatement, mais autant l'installer de suite.
Tous ces éléments qui vont nous aider à créer notre site dynamique sont libres et gratuits. Certes, il en existe d'autres (parfois payants), mais la combinaison Apache + PHP + MySQL est la plus courante sur les serveurs web, à tel point qu'on a créé des "packs" tous prêts qui contiennent tous ces éléments. Il est possible de les installer un à un mais cela prend plus de temps et vous n'allez rien y gagner (sauf si vous êtes administrateur de serveur, ce qui ne devrait pas être votre cas ).
Nous allons voir comment installer le "pack" qui convient en fonction de votre système d'exploitation dans la suite de ce chapitre.
Sous Windows : WAMP
Il existe plusieurs paquetages tous prêts pour Windows. Je vous propose d'utiliser WAMP Server qui a l'avantage d'être régulièrement mis à jour et disponible en français.
Commencez par télécharger WAMP sur son site web officiel. Rendez-vous sur la page
"Téléchargement". Vous n'êtes pas obligé de remplir le formulaire, il vous suffit de descendre tout en bas de la page et de cliquer sur "Télécharger WampServer".
Une fois téléchargé, installez-le en laissant toutes les options par défaut. Il devrait s'installer dans un répertoire comme C:\wamp et créer un raccourci dans le menu Démarrer.
Lorsque vous lancez WAMP, une icône doit apparaître en bas à droite de la barre des tâches, à côté de l'horloge :
Si une fenêtre apparaît pour vous indiquer que le pare-feu bloque Apache, cliquez sur Débloquer. Vous n'avez aucune raison de vous inquiéter, c'est parfaitement normal.
Par défaut, WAMP est en anglais. Vous pouvez facilement le passer en français en faisant un clic droit sur l'icône de WAMP dans la barre des tâches, puis en allant dans le menu Language / french.
WAMP est maintenant en français !
Vous pouvez maintenant lancer la page d'accueil de WAMP. Faites un clic gauche sur l'icône de WAMP (attention, j'ai bien dit un clic gauche cette fois), puis cliquez sur Localhost.
Une page web similaire à la capture ci-dessous devrait s'ouvrir dans votre navigateur favori (Firefox par exemple). Si la page s'affiche chez vous, cela signifie qu'Apache fonctionne.
La page web que vous voyez à l'écran vous a été envoyée par votre propre serveur Apache que vous avez installé en même temps que WAMP. Vous êtes en train de simuler le fonctionnement d'un serveur web sur votre propre machine. Pour le moment, vous êtes le seul internaute à pouvoir y accéder. On dit qu'on travaille "en local". Notez que l'URL affichée par le navigateur dans la barre d'adresse est http://localhost/, ce qui signifie que vous naviguez sur un site web situé sur votre propre ordinateur.
La section "Vos projets" de la page d'accueil de WAMP doit indiquer qu'aucun projet n'existe pour le moment. Considérez que chaque site web que vous entreprenez de faire est un nouveau projet.
Nous allons créer un projet de test que nous appellerons tests. Pour ce faire, ouvrez l'explorateur Windows et rendez-vous dans le dossier où WAMP a été installé, puis dans le sous-dossier intitulé www. Par exemple : c:\wamp\www. Vous pouvez aussi faire clic gauche / répertoire www sur l'icône de WAMP.
Une fois dans ce dossier, créez un nouveau sous-dossier que vous appellerez tests :
Retournez sur la page d'accueil de WAMP et actualisez la page (vous pouvez appuyer sur la touche F5). La section "Vos projets" devrait maintenant afficher "tests" car WAMP a détecté que vous avez créé un nouveau dossier :
Vous créerez là-dedans vos premières pages web en PHP.
Vous pouvez cliquer sur le lien "tests". Comme vous n'avez pas encore créé de fichier PHP, vous devriez voir une page vide comme ceci :
Si vous avez le même résultat, cela signifie que tout fonctionne. Bravo, vous avez installé WAMP et il fonctionne correctement. Vous êtes prêt à programmer en PHP !
Vous pouvez passer les sections suivantes qui ne concernent que les utilisateurs sous Mac OS X et Linux.
Sous Mac OS X : MAMP
Pour ceux qui ont un Mac sous Mac OS X, je vous conseille le programme MAMP (Mac Apache MySQL PHP). Il est vraiment très simple à installer et à utiliser.
Rendez-vous sur le site officiel de MAMP et cliquez sur "Download Now" sur la page d'accueil :
Si vous avez une version de Mac OS X antérieure à Mac OS X 10.4, vous devrez télécharger une ancienne version de MAMP grâce aux liens présents un peu plus bas sur la même page.
