Pour créer son serveur web perso (si, si, c'est possible), il nous faut quelques informations sur le fonctionnement du protocole HTTP.

le protocole HTTP, principe

Pour se connecter au web, on utilise le protocole HTTP qui permet de demander une page web à un serveur http (en rouge).

Celui-ci, en réponse, nous envoie la page ressource demandée (en vert).

Notre navigateur analyse le texte de la page et lance les demandes de tous les objets contenus dans la page : images, pictogrammes, sons, vidéos mais aussi feuilles css, scripts js importés, etc. ...

A noter : le navigateur ne s'appelle pas "Google" mais Chrome et ce nom est un site web qui offre un service d'indexation des sites : un moteur de recherche
Il y a d'autres moteurs de recherche, alternatifs au plus courant et intrusif : Qwant (France!), Duck duck go, Lilo, Ecosia, etc. ...
Faites un tour chez ces autres moteurs, vous y gagnerez en confidentialité et ... écologie !

Les services du serveur

De notre côté, le client, nous utilisons le navigateur pour accéder au web (Edge, Chrome, Firefox, Brave, Opéra, Safari, etc. etc...).

Sur le serveur, nous avons (au moins) trois services (logiciels) :

1. le serveur http qui reçoit les demandes du client et cherche dans le disque les pages et objets demandés
2. le SGBD qui stocke les informations dans des tables et discute en SQL
3. un module d'intreprétation du langage PHP afin de créer des pages HTML dynamiques et de faire du SQL avec le SGBD

Cette architecture est souvent réalisée avec les logiciels : Apache, Mysql et PHP (amp).

On voit en plus que le développeur met à jour les fichiers du serveur avec FTP (client FileZilla ou autre) sur le disque du serveur.

Il existe d'autres serveurs http : Nginx, litehttp, etc. ...
Il existe d'autres serveurs de BDD : PostgreSQL, Oracle, SQLServer, MongoDB, etc. ...

Note : Actuellement, Mysql est systématiquement remplacée par MariaDB mais les directives php se nomment encore mysql.

Pour se connecter au site web, nous écrivons son adresse sous forme d'URL ou d'adresse IP dans la barre d'adresse. Ensuite click, click sans réfléchir ...

Http utilise le port TCP 80 mais d'autres applications l'utilisent aussi. Cela peut poser des problèmes. Avant d'installer quoi que ce soit, vérifier que Skype et IIS soient arrêtés.

On modifiera la config de notre serveur afin d'utiliser un autre port lorsqu'il sera installé

(Télécharger)

Editeur de texte

Pour le travail que nous allons faire, pas besoin d'investir dans un IDE compliqué (et cher).

Avant tout, installer un éditeur de texte. Je recommnade notepad++ (à cause de ses raccourcis clavier) mais tout autre outil convient parfaitement.

Surtout, utilisez celui que vous maîtrisez mais pas MS Word, Libre Office ou autre texteur qui ne permettent vraiment pas d'écrire de programmes PHP (et le HTML est bourré de balises encombrantes).

Packages de serveurs

Les outils que nous allons utiliser sont groupés dans des packages (made in France ;D Pour une fois qu'on fait que'qu' de bien, y faut ben l'dire).

Je vous propose les outils suivants : UwAmp (assez portable, pas d'installation paticulière, un peu trop léger ?) ou WampServer (plus intégré mais avec quelques soucis d'installation et de configuration au départ)

Les deux solution sont valables mais pas besoin de se limiter à celles-ci, d'autres existent : Xamp, EasyPhp, etc. ...

Autre solution, utiliser une VM Linux avec Apache, Mysql, PHP, phpMyAdmin et proftpd. C'est un environnement encore plus réaliste et vous avez une VM www.ova qui est prète à l'emploi.

Préparation de votre environnement Windows

Pour faciliter votre travail, faites apparaître les extensions des fichiers dans votre navigateur (options d'affichage, cocher "extensions des fichiers").

.

Préparation

Créer un dossier de travail nommé ProgWeb dans une clé USB ou un disque dur de données (E:, F:, …), éventuellement (mais c'est moins bon) à la racine de C: ou dans MesDocuments ou sur le bureau.

Télécharger UwAmp (zip) et décompresser le fichier zip dans le dossier de travail progWeb.

Utilisation

Afficher le contenu du dossier créé, il contient l'exécutable UwAmp.exe (le serveur à démarrer) et un dossier www où nous allons placer tous nos projets.

On accède aux données avec l'adresse : 127.0.0.1 dans le navigateur

Dans le cas où il y aurait un conflit de port TCP (port 80 non disponible) aller dans la config de Apache, choisir la ère ligne, changer le port : 8080 ou 8008, valider.

Cérer une application

Simple, on va faire un dossier dans le répertoire www et is sera visible et accessible dans UwAmp.

Préparation

Télécharger Wampserver sur le site officiel et l'installer avec les paramètres par défaut.

Éventuellement, modifier le choix du navigateur et de l'éditeur, mais ce n'est pas important.

Il faudra faire une petite modif dans le paramétrage de l'index à cause de la notion d'hôte virtuels et de chemin d'accès aux dossiers. Voir encadré ci-contre.

Avec WampServer, pas besoin de créer de dossier, l'installateur crée un dossier c:\wamp dans lequel il y a le gestionnaire de services wampserver.exe et un dossier www dans lequel nous mettrons nos projets.

Utilisation

Pour se connecter utiliser l'adresse 127.0.0.1 dans votre navigateur.

Cérer une application

Simple avec la modif ci-dessus, on va faire un dossier dans le répertoire www et il sera visible et accessible dans WampServer.

Sinon, créer des hôtes virtuels (virtuals hosts) pour chaque projet ou un répertoire de travail et le tour est joué. Avec les hôtes virtuels, le répertoire de travail n'a même pas besoin d'être dans www.

HTML seulement

Dans le dossier www, ajouter un répertoire test.

Dans ce dossier, créer un nouveau document texte et renommez-le test.html (Attention, l'extension est importante)

Ouvrir ce fichier avec l'éditeur de texte et y coller le code suivant :

<html>
<body>
<h1>Ceci est notre première page …</h1>
<table><tr>
		<td>Page 1</td>
		<td><a href="page2.php">Page 2 >></td>
		<td><a href=page3.php>Page 3 >> >></a></td>
</tr></table>
 
<p>Le PHP sert à produire un langage, le HTML.</p>
<p>mon premier noob code</p>
</body>
</html>

Test HTML et PHP

Créer un fichier texte dans notre répertoire de travail et modifier tout le nom, extension comprise, avec : testPHP.php

<html>
<head>
    <style> .gros{font-size:20px;color:red;font-weight:bold;} </style>
</head>
<body>
<h1>Ceci est notre seconde page …</h1>
<table><tr>
	<td><a href=page1.php>&lt;&lt; Page 1 </a></td>
	<td>Page 2</td>
	<td><a href=page3.php>Page 3 &gt;&gt;</a></td>
</tr></table>
 
Ceci est du html natif<br>
<?php // ici, on commence le code PHP
	date_default_timezone_set("Europe/Paris"); // pour ne pas avoir de pbm de fuseau horaire
 
	// ceci est du code PHP
	echo "ceci est du <span class='gros'>HTML</span> écrit par <b>PHP</b><br>";
	echo "<br>";
	echo "Nous sommes le ".date("d/m/Y");
?> <!-- fin du code PHP -->
Ceci est à nouveau du html natif<br>
<hr>
 
Et voici un petit formulaire ?<br>
<form action=page2.php>
    <input type=text name=test placeholder="Taper un texte">
    <input type=submit name=go value="Valider la saisie">
</form>
 
</body>
</html>

La commande echo permet de produire le langage html affiché par le navigateur

Et le fichier de traitement du formulaire :

<html>
<head>
    <style> .gros{font-size:20px;color:red;font-weight:bold;} </style>
</head>
<body>
<h1>Ceci est notre troisième page</h1>
<table><tr>
	<td><a href=page1.php><< << Page 1</td>
	<td><a href=page2.php>Page 2 <<</td>
	<td>Page 3</td>
</tr></table>
 
C'est le fichier de traitement : du formulaire
<?php
$recup=$_REQUEST['test'];
echo $recup."<br>";
?>
Fin du traitement des données<br>
 
 
</body>
</html>