MiseArchitecture client-serveur web & BD avec Apache Mysql sous Windows

1 Présentation d'une architecture client serveur

Une architecture client serveur web classique comprend un serveur web coté serveur et un navigateur coté client. Nous avons choisi pour la mise en place d'une telle architecture d'installer le serveur web Apache qui détient plus de 60% de part de marché des serveurs web (2011). le site web officiel du projet Apache dans sa section download :http://httpd.apache.org/download.cgi recense les informations sur les dernières versions du serveur Apache. On retrouve sur ce site les sources et les binaires du serveur Apache en versions alpha, béta, stable et les serveurs de téléchargement. Par exemple pour une installation binaire sous Windows vous pouvez telecharger la dernière version stable du serveur qui porte une extension .msi (exemple: apache_X.X.X-win32-x86-openssl- 0.9.8g.msi qui supporte openssl). Double cliquez sur le fichier téléchargé et laissez vous guider. Pour la mise en place d'un serveur de base de données également le site web officiel de Mysql dans sa section download : http://dev.mysql.com/downloads/ propose un ensemble d'installateurs (mysql-installer-X.X.X.msi) comprenant l'ensemble des produits Mysql dans un seul package.
Si dans le choix de l'architecture le serveur Mysql et le serveur Apache se trouvent installés sur des machines différentes ce premier type d'installation est nécessaire. A coté de ce type d'installation (chaque serveur est installé séparémment) il existe un ensemble d'applications qui proposent l'installation sumultannée d'Apache et de mysql. Dans cet atelier nous avons nous interesser à ce deuxième type d'installation qui présente l'avantage de faciliter la configuration des serveurs et la gestion des services (arrêt et démarrage des serveurs), de gérer l'installation du langage PHP comme module d'Apache et sa compatibilité avec ce dernier. Parmi ces bundles nous pouvons citer EasyPHP, XAMPP, LAMP, WAMP, .

2 Wamp serveur

WampServer (Windows Apache Mysql PHP) est une plate-forme de développement Web sous Windows comprenant principalement les toutes dernières versions du serveur web Apache, du serveur de base de données Mysql et du langage de scripts PHP. A la fin de l'installation nous allons disposer d'une architecture client serveur comme sur le schéma suivant :

2.1 Téléchargement de Wamp serveur

WampServer est disponible gratuitement (sous licence GPL). Pour le télécharger allez à la section téléchargement du site officiel de WampServer et télécharger la dernière version de l'application WampServerX.Xe-x64.exe.

2.2 Installation de Wamp serveur

Comme vous allez le voir, WampServer s'installe facilement et son utilisation très intuitive permet de le configurer très rapidement (sans toucher aux fichiers de configuration). Double cliquez sur le fichier téléchargé et laissez vous guider en cliquant sur Next. Tout est géré par l'installeur de WampServer. Vous devez entre autres accepter la licence et choisir le repertoire d'installation. Si l'installation se passe bien, vous devriez voir apparaître un petit symbole blanc dans le systray en bas à droite de votre barre des tâches.

2.3 Test du serveur Apache

Pour vérifier que l'installation s'est bien passée et que le serveur a bien démarré il faut lancer un navigateur sur la machine serveur et taper l'URL suivante: http://localhost/ ou 127.0.0.1. Si tout se passe bien la page d'accueil du serveur Apache par défaut est affichée.

2.4 Utilisation de Wamp serveur

Les fonctionnalités de WampServer sont très complètes et très intuitives. Via un click gauche sur l'icône de WampServer, vous pouvez notamment:

• gérer les services de Apache et MySQL
• passer en mode online/offline (accessible à tous ou limité à localhost)
• installer et changer de version de Apache, MySQL et PHP
• gérer les paramètres de configuration de vos serveurs
• accéder à vos logs
• accéder aux fichiers de configuration
• créer des alias

Via un click droit :

• changer la langue du menu de WampServer
• accéder directement au site officiel

2.4.1    Demarrage et arrêt du serveur

A partir de l'icône WampServer il est possible de gérer le démarrage et l'arrêt du serveur Apache.

2.4.1.1 Applications

• Arrêter le serveur Apache et actualiser la page http://localhost/
• Démarrer le serveur et actualiser la page http://localhost/.

3 Hebergement d'une page HTML

Un serveur web Apache dispose d'un repertoire racine (DocumentRoot) à partir duquel les documents sont généralement sauvegardés. Par défaut le documentRoot du serveur web Apache est le repertoire c:\wamp\www.

3.1 Applications

• Créer une page html nommée etudiant.html disposant du titre « profil étudiant» et contenant le nom et le prénom de l'étudiant qui gère le serveur concerné. Cette page contient également des liens vers les pages cv, loisirs et album de l'étudiant.
• Sauvegarder cette première page html dans le documentRoot du serveur. A partir d'un navigateur web acceder à la page html via l'URL localhost/etudiant.html. Afficher le code source du fichier etudiant.html à partir du navigateur.
• Quelle différence percevez vous entre ce code et le code du fichier etudiant.html ? En déduire le rôle du serveur Apache lorsqu'il s'agit de renvoyer des pages html. (programmation statique)
• Créer les fichiers cv.html, loisirs.html et album.html dans un repertoire nommé profil créé à l'interieur du documentRoot. Vérifier que les différents liens entre les fichiers ainsi créés fonctionnent correctement
• Quel est le résultat obtenu si vous essayer d'accéder à la page localhost/profil ?
• Ajouter un fichier index.html contenant dans le repertoire profil et accéder de nouveau à la page localhost/profil.
• Ouvrir le fichier de configuration du serveur Apache et localisez les directives utilisées pour le documentRoot et les fichiers index.

3.2 Fonctionnement du serveur web en « mode statique »

Quand un « document statique » (html, css, images, pdf, ...) est demandé au serveur celui ci le recherche à partir de son documentRoot et s'il le trouve l'envoie sans aucune modification, ni traitement au client. Si le document demandé par le client n'existe pas alors le serveur envoie une page d'erreur prévue à cet effet.

3.2.1 Applications
Que se passe t-il si vous essayer d'acceder à la page localhost/etudiantUni.html qui n'existe pas sur le serveur ?

4 Hebergement dynamique des pages PHP

En installant WampServer le langage de script PHP a été installé et configuré comme module du serveur Apache.

4.1 Applications

1. Créer une page php nommée multi.php disposant du titre « Table de multiplication par 2» et contenant la table de multiplication par 2. Le code source est le suivant:
2.     Sauvegarder cette première page php dans le documentRoot du serveur.
3. A partir d'un navigateur web acceder à la page php via l'URL localhost/multi.php.
4. Afficher le code source du fichier multi.php à partir du navigateur. Quelle différence percevez vous entre ce code et le code du fichier multi.php sur le serveur ? En déduire le rôle du serveur Apache lorsqu'il s'agit de renvoyer des pages php. (programmation dynamique)
5. Ouvrir le fichier de configuration du serveur Apache et localisez les directives utilisées pour configuer php comme module Apache.

4.2 Fonctionnement du serveur web en « mode dynamique »

Quand un « document dynamique » (php, asp, jsp, ...) est demandé au serveur celui ci le recherche à partir de son documentRoot et s'il le trouve l'envoie à un programme tiérce pour interprétation. Le programme après traitement renvoie le document au serveur web qui à son tour l'envoie au client. Comme dans le cas statique si le document demandé par le client n'existe pas alors le serveur envoie une page d'erreur prévue à cet effet.

4.2.1 Applications


1. Que se passe t-il si vous essayer d’acceder à la page localhost/etudiantUni.php qui n’existe pas sur le serveur ?
2. Ouvrir le fichier de configuration du serveur Apache et localisez les directives utilisées pour dire que les fichiers .php doivent être envoyés à l’interpreteur php. Que se passerait t-il si nous ajoutons à cette liste l’extension .html ? Que se passerait t-il si nous enlevons à cette liste l’extension .php ?

5 Client Mysql

Le serveur de base de données Mysql dispose d'un client de base en mode console et d'une multitude de clients en mode graphique : Mysql Front, MySQL workbench, Toad for mysql, phpMyAdmin*, eskuel*, ... Pour la connection à notre serveur et la manipulation des bases de données nous allons utiliser phpMyadmin. phpMyAdmin est une application libre écrite en PHP qui permet de gérer un serveur Mysql. PhpMyadmin est une parfaite illustration des possibilités offertes par le langage de script PHP pour interfacer les bases de données.

5.1 Applications

1. Allez à la page d'accueil de phpMyAdmin( localhost/phpMyadmin) et créer une base de données universite. -    Créer dans la base université les tables etudiants (id, nom, prénom, id_classe) et classes (id, libelle, niveau).
2. Mettre en place les contraintes d'intégrité clé primaire et clé étrangères et identifier les prérequis.
3. Inserer des enregistrements dans les tables etudiants et classes en repectant les contraintes d'intégrité.
4. Utiliser une requete SQL pour afficher le libellé de la classe de l'étudiant dont l'id est 2.