Le serveur web

Le côté serveur

1. Les choix

Il est temps de franchir une nouvelle étape, car il va falloir maintenant configurer un serveur web pour pouvoir aller plus loin. Il existe de nombreuses solutions pour y parvenir.

Avec un ordinateur sous Linux, il est fréquent que les paquetages nécessaires soient déjà installés. Quelquefois, il n’y a qu’à activer les services httpd et mysqld pour disposer d’un serveur local opérationnel. Dans d’autres cas, il sera nécessaire de télécharger les paquetages Apache et PHP, ainsi que la base de données souhaitée, MySQL ou MariaDB.

Si l’on a un PC sous Windows, il suffira d’utiliser une distribution WAMP pré-configurée. Les plus populaires sont EasyPHP et WampServer. Il n’y a qu’un seul fichier à télécharger qui se charge de l’installation de la totalité des composants nécessaires. Il est ensuite possible de choisir les versions de PHP et de MySQL ou MariaDB que l’on souhaite utiliser.

Si l’on dispose d’un NAS (Network Attached Storage : stockage relié au réseau), comme par exemple ceux proposés par Synology, Qnap ou Western Digital, alors il suffit d’activer les paquets nécessaires, généralement Apache (ou nginx), PHP et MySQL ou MariaDB.

Si l’on veut être sur le Web, il faut souscrire un hébergement chez un fournisseur. Il en existe des dizaines, certains hébergés en France, d’autres à l’étranger, du petit fournisseur local au grand groupe mondial. On peut citer par exemple : OVH, online.net, Amazon...

La solution de l’hébergement web n’est nécessaire que pour la phase de production, et pour le test final. Tant que l’on est en phase de développement, un serveur local, ou un serveur réseau sont des possibilités largement suffisantes. Il faut juste s’assurer que le serveur local est bien configuré comme le serveur de production, sinon on risque quelques déconvenues lors de la mise en production.

Pour le serveur web, les choix éprouvés sont Apache et nginx. Le premier dispose d’une importante quantité d’extensions et ses possibilités de configuration sont très étendues....

Le côté client

1. Un formulaire

Un formulaire de saisie des coordonnées personnelles va permettre de tirer parti efficacement de ce service web nouvellement créé.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>ADRESSE</title> 
<script src="lib/jquery/jquery-3.4.1.min.js"></script> 
<style> 
form div {margin: 0.5em} 
input[name=cp] {width:5em} 
select {width:20em} 
</style> 
</head>

L’en-tête est classique. Outre la librairie jQuery, les définitions de style présentes sont destinées à définir la taille des champs et l’espacement entre ceux-ci.

<body> 
<div id='form'> 
 <form> 
   <div>Nom : <input name="nom"></div> 
   <div>Prénom : <input name="prenom"></div> 
   <div>Code postal : <input name="cp"></div> 
   <div>Ville : 
     <select name='ville'> 
     </select> 
   </div> 
 </form> 
</div> 
<div> 
 <input type='button' value="OK"> 
</div>

Le code HTML ne contient que le formulaire. Quant au code JavaScript, il ne contient qu’un gestionnaire d’événement qui permet de mettre à jour la liste des villes lorsque l’on change de code postal :

<script> 
$('input[name=cp]').change(function() 
{ 
 $.get("ws/getVille.php?cp="+$(this).val()) 
 .done(function(data) 
 { 
   $('select[name=ville]').empty(); 
   for(line of data) 
     $('<option>') 
       .appendTo('select[name=ville]') 
       .text(line.ville) 
       .val(line.id); 
 }) 
 .fail(function() 
 { 
   $('select[name=ville]').empty(); 
 }); 
}); 
</script> 
</body> 
</html>...

Le serveur web

Le côté serveur

1. Les choix

Le côté client

1. Un formulaire

Pour aller plus loin