PLAN DE FORMATION Introduction Installer et configurer un serveur Web Les enjeux Le rôle d'un serveur Web Le modèle Client/Serveur Les services Web Les protocoles et les adresses La norme CGI

PLAN DE FORMATION Installation et configuration d'un site Web Installer et configurer un serveur Web Installation et configuration d'un site Web Installation de WampServer2 sous Windows Présentations des fichiers de configurations Configuration d'un site Web minima Lancement du site dans le navigateur Installation et configuration d'un serveur FTP

PLAN DE FORMATION Fonctionnement site Web / Navigateur Installer et configurer un serveur Web Fonctionnement site Web / Navigateur Principe de fonctionnement d'un navigateur Comment le site Web interagit avec le navigateur Fonctionnement d'un site Internet/Intranet

PLAN DE FORMATION Conception et réalisation de pages Web Installer et configurer un serveur Web Conception et réalisation de pages Web Le langage HTML Les feuilles de styles CSS DOM et script (JS) côté client Introduction à PHP Gestions des formulaires Les bases de données et le Web

PLAN DE FORMATION TP et mise en pratique Installer et configurer un serveur Web TP et mise en pratique Editeurs HTML Mise en place de la structure du Site Réalisation du site Web (choix de l'éditeur) Kompozer FirstPage ToWeb

LES ENJEUX Installer et configurer un serveur Web LES ENJEUX DU WEB

LES ENJEUX Installer et configurer un serveur Web Le web se définit comme une plateforme, en interaction entre le visiteur et le site lui-même : Le public devient éditeur de contenus (ex: blogs, youtube) Il décide comment visualiser l'information (système de vote) Il crée des communautés d'intérêt (de part l'utilisation qu'il fait du web) Deux types d'enjeux accompagne cette tendance : Economiques et financiers : investisseurs, monétisation de la publicité, vitrine et image de marque de la société Technologiques : nouveaux langages, nouvelles normes graphiques, utilisation de Framework, faciliter les échanges d'informations

LES ENJEUX ECONOMIQUES & FINANCIERS Installer et configurer un serveur Web LES ENJEUX ECONOMIQUES & FINANCIERS Appétit des investisseurs (fonds de capital risque, business angels et cercle familial) pour les projets web Levée de fond de Dailymotion pour 25M€, rachat de CityDeal par Groupon Le fond Séquoia Capital a investi 11M€ à la création de youtube et a récupéré presque 500M€ lors de sa revente à Google 20 mois plus tard Des outils matériels et logiciels à très bas prix (voire gratuits pour les logiciels libres) permettant de lancer un projet web sans barrière financière

LES ENJEUX ECONOMIQUES & FINANCIERS (2) Installer et configurer un serveur Web LES ENJEUX ECONOMIQUES & FINANCIERS (2) Nouveaux modèles économiques basés autour de la gratuité de service, de la publicité ciblée, de la collaboration des internautes Google : AdWord, AdSense Amazon : en partant d'un produit « best seller », les marchands en ligne oriente vers des articles moins connu mais en relation directe Aider les internautes à se rencontrer, à communiquer, à échanger, à dialoguer, à vendre/acheter Inciter les utilisateurs à créer ou à participer eux-mêmes leurs sites Internet Fédérer les visiteurs autour d'un même sujet d'intérêt ou d'un même service et ainsi les inciter à venir et revenir régulièrement

LES ENJEUX TECHNOLOGIQUES Installer et configurer un serveur Web LES ENJEUX TECHNOLOGIQUES Applications au contenu riche : facilité de mise à jour, remises en forme en fonction des désirs du visiteurs, plus intuitives et agréables à utiliser Trouver/réaliser le plus rapidement/efficacement possible Les gens qui avaient l'habitude d'être des consommateurs d'informations deviennent maintenant des éditeurs de plein droit (Wikipédia) Les podcasts ont fait baisser les coûts et supprimé les barrières technologiques de la diffusion audio vidéo (ex: HEC ItunesU avec un système de cours en ligne AJAX : Utilisation/regroupement de plusieurs technologies Communication asynchrone : un intermédiaire est ajouté entre le serveur et le client à la manière d'une nouvelle couche logicielle

LE RÔLE DU SERVEUR WEB RÔLE D'UN SERVEUR WEB Installer et configurer un serveur Web LE RÔLE DU SERVEUR WEB

RÔLE D'UN SERVEUR WEB Un serveur Web peut être : Installer et configurer un serveur Web Un serveur Web peut être : Un ordinateur tenant le rôle de serveur informatique sur lequel fonctionne un logiciel serveur HTTP ; Le serveur HTTP lui-même ; Un ensemble de serveurs permettant le fonctionnement d'applications Web.

RÔLE D'UN SERVEUR WEB Un serveur Web peut être (2) : Installer et configurer un serveur Web Un serveur Web peut être (2) : Le plus souvent, un serveur Web fait fonctionner plusieurs logiciels qui fonctionnement en parallèle. On retrouve la combinaison suivante : Apache (serveur HTTP) MySQL (serveur de base de données) PHP (langage de programmation) Se sont des logiciels libres.

RÔLE D'UN SERVEUR WEB Un serveur Web peut être (3) : Installer et configurer un serveur Web Un serveur Web peut être (3) : Sous Linux, cette combinaison porte le nom LAMP comme (Linux, Apache, MySQL, PHP). Sous Windows, cette combinaison porte le nom WAMP comme (Windows, Apache, MySQL, PHP). Sous Mac, cette combinaison porte le nom MAMP comme (Macintosh, Apache, MySQL, PHP). La plupart des ordinateurs utilisés comme serveur Web sont reliés à Internet et hébergent des sites Web du WWW. Les autres serveurs se trouvent sur des Intranets et hébergent des documents internes d'une entreprise, d'une administration.

RÔLE D'UN SERVEUR WEB Serveur HTTP & Serveur Web : Installer et configurer un serveur Web Serveur HTTP & Serveur Web : Un ordinateur sur lequel fonctionne un serveur HTTP est appelé serveur Web. Le terme serveur Web peut aussi désigner le serveur HTTP lui-même. Les deux termes sont utilisés pour le logiciel car le protocole HTTP a été développé pour le Web et les pages Web sont en pratique toujours servies avec ce protocole.

RÔLE D'UN SERVEUR WEB Différents types de serveur : Installer et configurer un serveur Web Différents types de serveur : Apache (le plus répandu sur Unix/Linux/Windows). Microsoft Information Server (IIS sur Windows Server). Netscape Server (Unix, Windows Server). Jigsaw (Java, portable). MacHTTP (Mac). http://webcompare.internet.com : pour une comparaison complète de tous les serveurs disponibles.

RÔLE D'UN SERVEUR WEB Un exemple : le serveur APACHE Installer et configurer un serveur Web Un exemple : le serveur APACHE Gratuit (license GNU) Modulaire Simple Efficace Robuste (c'est le plus utilisé) http://www.apache.org

RÔLE D'UN SERVEUR WEB Rôle d'un serveur (ici APACHE) : Installer et configurer un serveur Web Rôle d'un serveur (ici APACHE) : Transformation de l'URL en fichier ou en script Vérification d'identité Le client est-il qui il prétend être ? Vérification d'accès Le client est-il autorisé à effectuer cette requête ? Détermination de : Type MIME des données Taille des données Langage

RÔLE D'UN SERVEUR WEB Rôle d'un serveur (ici APACHE) (2) : Installer et configurer un serveur Web Rôle d'un serveur (ici APACHE) (2) : Envoi de la réponse au client Mise à jour des fichiers de logs Traitements évolués (interprète perl ,php, accès à des BDs, etc...

RÔLE D'UN SERVEUR WEB Exemple de configuration (serveur APACHE) Installer et configurer un serveur Web Exemple de configuration (serveur APACHE) Fichier httpd.conf Fichier access.conf Mime.types (ou TypeConfig dans httpd.conf) Certains serveurs utilisent un découpage différents ou une interface graphique Trois fichiers de logs (par défaut) pid error_log access_log

RÔLE D'UN SERVEUR WEB Que peut faire un serveur : Installer et configurer un serveur Web Que peut faire un serveur : Servir une page en ajoutant des entêtes appropriés Cas le plus commun Servir une page telle quelle Utile pour des pages à expiration rapide (mod_assis) Exécuter un script et renvoyer le résultat comme une page Interprétation de formulaires (mod_cgi) Exécuter un script et renvoyer le résultat tel quel Scripts dit nph (Non Parsed Hearder)

RÔLE D'UN SERVEUR WEB Que peut faire un serveur (2) : Installer et configurer un serveur Web Que peut faire un serveur (2) : Interpréter des instructions encodées dans des tags HTML spéciaux Langage de requête ASP interprété par le serveur IIS par exemple pour faire des requêtes à une BD Javascript interprété au niveau serveur Langage de requête pour MySql (module Apache) Perl (module)

RÔLE D'UN SERVEUR WEB Que peut faire un serveur (3) : Installer et configurer un serveur Web Que peut faire un serveur (3) : Vérifier la machine d'origine (ou le dernier proxy sur la chaîne) Certaines autorisations Voir le mod_access de Apache (http://www.apache.org/docs/mod_access.html) Vérifier le mot de passe et un login Voir le mod_auth de Apache (http://www.apache.org/docs/mod_auth.html)

RÔLE D'UN SERVEUR WEB Que peut faire un serveur (4) : Installer et configurer un serveur Web Que peut faire un serveur (4) : Construire une page au vol avec des ordres spécifiques Equivalents de #include Permet d'insérer le résultat de scripts dans des pages (compteurs, date du jour, dernière date de modification) Voir le mod_include de Apache (http://www.apache.org/docs/mod_include.html)

RÔLE D'UN SERVEUR WEB Que peut faire un serveur (5) : Installer et configurer un serveur Web Que peut faire un serveur (5) : Reconnaitre les entêtes de requêtes et servir des pages différentes suivant le client ou ses préférences Avoir des pages différentes selon le browser Parler la langue demandée (exemple de site : http://babel.alis.com) qui réagit selon le language souhaité Voir les modes de Apache suivant : http://www.apache.org/docs/content-negotiation.html http://www.apache.org/docs/mod_mime.html

RÔLE D'UN SERVEUR WEB Que peut faire un serveur (6) : Installer et configurer un serveur Web Que peut faire un serveur (6) : Lister des directories Voir le mod_dir de Apache (http://www.apache.org/docs/mod_dir.html) Encrypter les données et sécuriser les transactions Voir le ssl Apache (http://www.apache-ssl.org)

RÔLE D'UN SERVEUR WEB Que peut faire un serveur (7) : Installer et configurer un serveur Web Que peut faire un serveur (7) : Répondre différemment suivant le nom de la machine Une même machine peut porter plusieurs @IP (interfaces virtuelles) Une même machine peut porter plusieurs noms, même si elle n'a qu'une @IP Les serveurs Web savent gérer ces cas de figure : une seule machine avec une seule carte réseau et une seule @IP peut héberger plusieurs serveurs WWW virtuels Par exemple : répondre à http://www.monsite.fr et http://www.monsite2.fr en renvoyant des pages différentes et en maintenant des logs et des configs propres à chaque serveur Virtuel (voir le mode vhosts de Apache)

ARCHITECTURE CLIENT / SERVEUR LE MODELE CLIENT/SERVEUR Installer et configurer un serveur Web ARCHITECTURE CLIENT / SERVEUR

LE MODELE CLIENT/SERVEUR Installer et configurer un serveur Web Client / Serveur - Définition L'architecture client/serveur désigne un mode de communication entre plusieurs ordinateurs d'un réseau qui distingue un ou plusieurs clients du serveur : Chaque logiciel client peut envoyer des requêtes à un serveur. Un serveur peut être spécialisé en serveur d'applications, de fichiers, de terminaux, ou encore de messagerie électronique.

LE MODELE CLIENT/SERVEUR Installer et configurer un serveur Web Caractéristiques d'un serveur : Il est initialement passif (ou esclave, en attente de requête) ; Il est à l'écoute, prêt à répondre aux requêtes envoyées par des clients ; Dès qu'une requête lui parvient, il traite la demande et envoie une réponse. Caractéristiques d'un client : Il est actif le premier (ou maître) ; Il envoie des requêtes au serveur ; Il attend et reçoit les réponses du serveur ;

LE MODELE CLIENT/SERVEUR Installer et configurer un serveur Web Le client et le serveur doivent bien sûr utiliser le même protocole de communication. Un serveur est généralement capable de servir plusieurs clients simultanément. Un autre type d'architecture réseau est le peer-to-peer, dans lequel chaque ordinateur ou logiciel est à la fois client et serveur. Exemple d'architecture client-serveur. Les points rouge/vert/bleu correspondent à des applications hébergées sur différents serveurs

LE MODELE CLIENT/SERVEUR Installer et configurer un serveur Web Architectures trois tiers et multi-tiers : Les termes « trois tiers » et « multi-tiers » sont traduits de l'anglais three tier et multi-tier ou n-tier. Pour cette raison, il est préférable d'employer la traduction « trois niveaux » et multi-niveaux ». L'architecture client/serveur possède deux types d'ordinateurs sur un réseau : les clients et les serveurs, elle possède donc deux niveaux et s'appelle two-tier en anglais. Les architectures multi-tier (ou distribuées) scindent le serveur en plusieurs entités (par exemple, un serveur d'application qui lui-même est le client d'un serveur de base de données).

LE MODELE CLIENT/SERVEUR Installer et configurer un serveur Web Comparaison avec les architectures distribuées: Avantages Toutes les données sont centralisées sur un seul serveur, ce qui simplifie les contrôles de sécurité et la mise à jour des données et des logiciels. Les technologies supportant l'architecture client/serveur sont plus matures que les autres. Une administration au niveau serveur, les clients ayant peu d'importance dans ce modèle, ils ont moins besoin d'être administrés.

LE MODELE CLIENT/SERVEUR Installer et configurer un serveur Web Comparaison avec les architectures distribuées: Inconvénients Si trop de clients veulent communiquer avec le serveur au même moment, ce dernier risque de ne pas supporter la charge. Si le serveur n'est plus disponible, plus aucun des clients ne marche. Les coûts de mise en place et de maintenance sont élevés.

LE MODELE CLIENT/SERVEUR Installer et configurer un serveur Web Exemples d'architecture client/serveur : La consultation de pages sur un site web fonctionne sur une architecture client/serveur. Un internaute connecté au réseau via son ordinateur et un navigateur web est le client, le serveur est constitué par le ou les ordinateurs contenant les applications qui délivrent les pages demandées (utilisation du protocole de communication HTTP). Les courriels sont envoyés et reçus par des clients et gérés par un serveur de messagerie. Les protocoles utilisés sont le SMTP, et le POP ou IMAP. La gestion d'une base de données centralisée sur un serveur peut se faire à partir de plusieurs postes clients qui permettent de visualiser et saisir des données. Le système X Window fonctionne sur une architecture client/serveur. Le processus client (une application graphique) tourne sur la même machine que le serveur mais peut être aussi bien lancé sur un autre ordinateur faisant partie du réseau.

LES SERVICES WEB Installer et configurer un serveur Web SERVICES WEB

LES SERVICES WEB Définition : Installer et configurer un serveur Web Les services web (en anglais web services) représentent un mécanisme de communication entre applications distantes à travers le réseau internet indépendant de tout langage de programmation et de toute plate-forme d'exécution : utilisant le protocole HTTP comme moyen de transport. Ainsi, les communications s'effectuent sur un support universel ; employant une syntaxe basée sur la notation XML pour décrire les appels de fonctions distantes et les données échangées ; organisant les mécanismes d'appel et de réponse.

LES SERVICES WEB Définition (2) : Installer et configurer un serveur Web Définition (2) : Grâce aux services web, les applications peuvent être vues comme un ensemble de services métiers, structurés et correctement décrits, dialoguant selon un standard international plutôt qu'un ensemble d'objets et de méthodes entremêlés. Le premier bénéfice de ce découpage est la facilité de maintenance de l'application, ainsi que l'interopérabilité permettant de modifier facilement un composant (un service) pour le remplacer par un autre, éventuellement développé par un tiers. Les services web facilitent non seulement les échanges entre les applications de l'entreprise mais surtout permettent une ouverture vers les autres entreprises. Les premiers fournisseurs de services web sont ainsi les fournisseurs de services en ligne (météo, bourse, planification d'itinéraire, pages jaunes, etc.), mettant à disposition des développeurs des API payantes ou non, permettant d'intégrer leur service au sein d'applications tierces.

LES SERVICES WEB Un Service Web, c’est quoi ? Installer et configurer un serveur Web Un Service Web, c’est quoi ? Un service Web est une « unité logique applicative » accessible en utilisant les protocoles standard d’Internet Une « librairie » fournissant des données et des services à d’autres applications. Un objet métier qui peut être déployé et combiné sur Internet avec une faible dépendance vis-à-vis des technologies et des protocoles. Combine les meilleurs aspects du développement à base de composants et du Web.

LES SERVICES WEB Un Service Web, c’est quoi ? (2) Installer et configurer un serveur Web Un Service Web, c’est quoi ? (2) Caractéristiques : Réutilisable Indépendamment de la plate-forme (UNIX, Windows, …) l’implémentation (VB, C#, Java, …) l’architecture sous-jacente (.NET, J2EE,...)

LES SERVICES WEB Evolution du Web Installer et configurer un serveur Web Evolution du Web

LES SERVICES WEB Aujourd’hui : Demain : Le Web 3ème génération Installer et configurer un serveur Web Le Web 3ème génération Aujourd’hui : Un site Web fournie des pages HTML - pas de structure - impossible à fusionner avec d’autres pages Demain : Un site Web est un composant fournissant des services en XML - structure / sémantique - fusion possible

LES SERVICES WEB Le Web 3ème génération (2) Installer et configurer un serveur Web Le Web 3ème génération (2) Exemple 2 Exemple 1

LES SERVICES WEB Pourquoi faire Installer et configurer un serveur Web Les services Web permettent d’interconnecter : Différentes entreprises Différents matériels Différentes applications Différents clients Distribuer et intégrer des logiques métiers Les services Web sont faiblement couplés

LES SERVICES WEB Modèle client / serveur Installer et configurer un serveur Web Modèle client / serveur Service Web Service Web XML XML XML Service Web Service Web XML Client XML Client

LES SERVICES WEB Quels objectifs Installer et configurer un serveur Web Quels objectifs Remplacer les protocoles actuels (RPC,DCOM,RMI) par une approche entièrement ouverte et interopérable, basée sur la généralisation des serveurs Web avec scripts CGI. Faire interagir des composants hétérogènes, distants, et indépendants avec un protocole standard (SOAP). Dédiés aux applications B2B (Business to Business), EAI (Enterprise Application Integration), P2P (Peer to Peer).

LES SERVICES WEB Et plus concrètement ? Installer et configurer un serveur Web Et plus concrètement ? Une nouvelle technologie des objets distribués ? Invocation distante des services Web : SOAP Description des services Web : WSDL Enregistrement et découverte de services Web : UDDI Basés sur des standards XML Standards du W3C : XML, SOAP, WSDL Standards industriels : UDDI, ebXML Propriétaires : DISCO, WSDD, WSFL, ASMX, … Implémentations actuelles Microsoft .Net Sun JavaONE : J2EE + Web services (WSDP = JAXP,JAX-RPC,JAXM…) Apache XSOAP / Axis Oracle, Bea, …

LES SERVICES WEB Architecture – Cycle de vie d'utilisation Installer et configurer un serveur Web Architecture – Cycle de vie d'utilisation 2 : J’ai trouvé ! Voici le serveur hébergeant ce service web Annuaire UDDI 3 : Quel est le format d’appel du service que tu proposes? Contrat SOAP 1 : Je recherche un service WEB 4 : Voici mon contrat (WSDL) XML Client 5 : J’ai compris comment invoquer ton service et je t’envoie un document XML représentant ma requête Serveur XML XML 6 : J’ai exécuté ta requête et je te retourne le résultat

LES SERVICES WEB Cycle de vie complet Installer et configurer un serveur Web Cycle de vie complet Etape 1 : Déploiement du service Web Dépendant de la plate-forme (Apache : WSDD) Etape 2 : Enregistrement du service Web WSDL : description du service Référentiels : DISCO (local), UDDI (global) Etape 3 : Découverte du service Web Etape 4 : Invocation du service Web par le client

LES SERVICES WEB 1: Déploiment du WS Installer et configurer un serveur Web 1: Déploiment du WS

LES SERVICES WEB 2: Enregistriment du WS Installer et configurer un serveur Web 2: Enregistriment du WS

LES SERVICES WEB 3: Découverte du WS Installer et configurer un serveur Web 3: Découverte du WS

LES SERVICES WEB 4: Invocation du WS Installer et configurer un serveur Web 4: Invocation du WS

LES SERVICES WEB Architecture globale Installer et configurer un serveur Web Architecture globale

LES SERVICES WEB Avantages des WS Installer et configurer un serveur Web Avantages des WS Les services Web fournissent l'interopérabilité entre divers logiciels fonctionnant sur diverses plates-formes. Les services Web utilisent des standards et protocoles ouverts. Les protocoles et les formats de données sont au format texte dans la mesure du possible, facilitant ainsi la compréhension du fonctionnement global des échanges. Basés sur le protocole HTTP, les services Web peuvent fonctionner au travers de nombreux pare-feux sans nécessiter des changements sur les règles de filtrage. Les outils de développement, s'appuyant sur ces standards, permettent la création automatique de programmes utilisant les services Web existants.

LES SERVICES WEB Inconvénients des WS Installer et configurer un serveur Web Inconvénients des WS Par l'utilisation du protocole HTTP, les services Web peuvent contourner les mesures de sécurité mises en place au travers des pare-feu. Les services Web souffrent de performances faibles comparée à d'autres approches de l'informatique répartie telles que le RMI, CORBA. Les normes de services Web dans certains domaines sont actuellement récentes.

LES SERVICES WEB Lexique Installer et configurer un serveur Web SOAP : Simple Object Access Protocol WSDL : Web Services Description Language SOA : Service Oriented Architecture RPC : Remote Procedure Call API : Application Programming Interface UDDI : Universal Description Discovery and Integration RMI : Remote Method Invocation

PROTOCOLES & ADRESSES Protocoles Installer et configurer un serveur Web Protocoles Définition Ensemble de règles et de procédure à respecter pour pouvoir échanger des données sur un réseau Remarque : exemple de la vie courante Ca va ? () / Oui () / J’ai pas entendu () / Je répête : « Oui » () Exemples à différents niveaux Niveau programmes (A - B) Tu fonctionnes ? (→) / Oui (←) / Envoie-moi le fichier toto.doc (→) / Ok c'est parti (←) / Bien reçu (→) / Au revoir (←) Niveaux système d'exploitation Toi, système d'éxploitation de la machine machine1.univ-lyon1.fr, passe le message « Tu fonctionnes ? » au programme qui écoute sur le port 3422 (→) Niveau cartes Toi carte réseau, regarde passer des paquets de données sur le cable, attrape ceux qui sont pour toi, et passe-en le contenu au système d'éxploitation

PROTOCOLES & ADRESSES Protocoles de communication Installer et configurer un serveur Web Protocoles de communication But compréhension entre machines / logiciels communications indépendantes du système d'exploitation ou de la plate-forme limitation des erreurs/risques durant la transmission Protocole pour l'échange de messages un langage et un ensemble de règles que deux systèmes doivent connaître (parler le même langage) les fabricants doivent se conformer aux normes ISO (International Standardization Organization) pour les protocoles utilisés sur leurs machines/logiciels Modèle OSI (Open System Interconnection) découpe le processus de transmission en 7 « couches » chaque couche est responsable de l'un des aspects de la communication en réseau

PROTOCOLES & ADRESSES Modèle en couches Installer et configurer un serveur Web Modèle en couches Candidature spontanée Personne Employeur écrire lire Format de ce type de lettre Lettre de motivation Lettre de motivation cacheter ouvrir Envoi/réception courrier Enveloppe Enveloppe poster délivrer Codification interne de la poste Centre de tri Centre de distribution acheminer récupérer Route (camion)

PROTOCOLES & ADRESSES Modèle OSI les 7 couches Installer et configurer un serveur Web Modèle OSI les 7 couches Application : gestion des échanges de données entre programmes et services du réseau Application Présentation : mise en forme des informations pour les rendre lisibles par les applications Présentation Session : détection du mode de communication à utiliser entre machines et péréphériques / Surveillance des connexions Session Transport : correction des erreurs de transmission; vérification de l'acheminement Transport Réseau : identification des machines connectées au réseau Réseau Liaison de données : subdivision des informations en « paquets » pour livraison sur le réseau Liaison de données Physique : contrôle du support de transmissions; circulation de l'information électrique Physique

PROTOCOLES & ADRESSES Protocoles de l'Internet Installer et configurer un serveur Web Protocoles de l'Internet Niveau OSI réseau IP (Internet Protocol) TCP/IP base de l'internet Adressage (routage) des informations Identification des machines Niveau OSI transport / session TCP (Transmission Control Protocol) Transfert d'information, contrôle des transmissions Niveau OSI application FTP (File Transfert Protocol) / Transfert de fichiers HTTP (Hyper Text Transfert Protocol) / Transfert d'informations sur le Web DNS (Domain Name Server protocol) / Conversion du nom des ordinateurs connectés au réseau en adresses IP

PROTOCOLES & ADRESSES Identification de machines sur Internet Installer et configurer un serveur Web Identification de machines sur Internet Une machine = un numéro Adresse IP universelle unique 4 nombres de 8 bits (4 octets) Séparés par des points Ex : 134.214.128.17 Classes d'adresses / organisations Classe A : 112.x.y.z (ex. NAZA) Classe B : 134.214.x.y (ex. Banque) Classe C : 56.243.12.x (ex. Cyber-café) Remarque : IPV6 16 octets Commence à se mettre en place

PROTOCOLES & ADRESSES Noms de ressources sur Internet Installer et configurer un serveur Web Noms de ressources sur Internet Idée : associer à l'adresse IP un nom de machine Ex. lisiperso15.univ-paris13.fr # 134.214.88.239 Nom de machine Décomposé hiérarchiquement Domaine (critère géographique, institutionnel, organisationnel,...) Sous domaine (éventuellement) Nom local de la machine Attribution ICANN : Internet Corporation for Assigned Names and Numbers .gov, .edu, etc. AFNIC : Association Française pour le Nommage Internet en Coopération .fr, .gouv.fr, .asso

PROTOCOLES & ADRESSES Traduction adresse IP / nom de machine Installer et configurer un serveur Web Traduction adresse IP / nom de machine Service de traduction fourni par des programmes appelés DNS DNS est aussi le nom du protocole utilisé pour communiquer entre un programme qui désire une traduction, et un serveur Un DNS gère un domaine ... DNS lisiperso15.univ-paris13.fr 134.214.88.239 dns.univ-paris13.fr … et transmet la question à un autre DNS s'il ne sait pas répondre www.ens-lyon.fr ? DNS www.ens-lyon.fr ? DNS 140.77.167.3 140.77.167.3 dns.univ-lyon1.fr

LA NORME CGI Installer et configurer un serveur Web LA NORME CGI

LA NORME CGI Installer et configurer un serveur Web Présentation de l'interface CGI Un script CGI (Common Gateway Interface, soit interface de passerelle commune) est un programme exécuté par le serveur web (on dit généralement « côté serveur ») Il permet d'envoyer au navigateur de l'internaute un code HTML créé automatiquement par le serveur (ex: sur une autre application, telle qu'un système de gestion base de données, d'où le nom de passerelle) Principaux intérêts de l'utilisation de CGI est la possibilité de fournir des pages dynamiques. C'est-à-dire des pages personnalisées selon un choix ou une saisie de l'utilisateur Ex d'application : l'utilisation de formulaire HTML dans des pages web, choisir ou saisir des données, puis clique sur un bouton de soumission du formulaire, envoyant les données du formulaire en paramètre du script CGI

LA NORME CGI Installer et configurer un serveur Web Langage de programmation des CGI Un programme CGI peut être écrit dans à peu près n'importe quel langage de programmation, il doit être : Capable de lire le flux de données d'entrée ; Capable de traiter des chaînes de caractères ; Capable d'écrire sur le flux standard de sortie ; Exécutable ou interprétable par le serveur Web.

LA NORME CGI Installer et configurer un serveur Web Langage de programmation des CGI (2) Les langages de programmatin les plus utilisés pour l'écriture des CGI sont les suivants : Le langage Perl, particulièrement adapté à la manipulation de chaînes de caractères ; Les langages C et C++ ; Le langage Java.

LA NORME CGI Installer et configurer un serveur Web Langage de programmation des CGI (3) Lorsqu'une requête est envoyée au serveur, celui-ci examine l'extension du fichier demandé afin de déterminer l'action qu'il va effectuer. Exemple : Dans le cas d'un fichier HTML, le serveur va générer des en-têtes de réponse HTTP qu'il va envoyer au navigateur demandant un fichier, puis envoyer le fichier HTML ; Dans le cas d'un fichier CGI écrit en Perl, le serveur va exécuter l'interpréteur Perl, celui-ci va interpréter le code contenu dans le fichier, puis envoyer les données au serveur, qui va les envoyer au navigateur.

LA NORME CGI Installer et configurer un serveur Web Langage de programmation des CGI (4) Le rôle d'un script CGI est : De recevoir des données envoyées par le serveur ; De les traiter ; De renvoyer des en-têtes de réponses et des tags HTML valides.

LA NORME CGI Installer et configurer un serveur Web Langage de programmation des CGI (5) En effet, lorsqu'un programme CGI renvoie un fichier, il doit commencer par envoyer un en-tête HTTP permettant de préciser le type de contenu envoyé au navigateur (appelé type MIME), c'est-à-dire : Dans le cas d'un fichier HTML, la chaîne suivante : Content-type : text/html Dans le cas d'un fichier GIF, la chaîne suivante : Content-type : image/gif

LA NORME CGI Installer et configurer un serveur Web Notion d'URL et d'en-tête HTTP Une URL (Uniform Ressource Locator) est une adresse permettant de localiser un fichier sur internet de manière unique. Grâce à cette adresse qu'il est possible d'effectuer des requêtes vers des pages Web. Cette adresse saisie dans le navigateur, celui-ci localise le serveur Web et lui transmet une requête via le protocole HTTP (HyperText Transfer Protocol), permettant d'envoyer des données sous la forme d'en-têtes afin d'identifier : Le fichier demandé, L'adresse IP du demandeur, Le navigateur effectuant le requête ...

LA NORME CGI Installer et configurer un serveur Web Schéma de requête d'un navigateur à un serveur Web Pour utiliser les CGI, il faut comprendre comment se déroule la commnication entre le navigateur et le serveur lors de la demande d'une page Web.

LA NORME CGI Installer et configurer un serveur Web Schéma de requête d'un navigateur à un serveur Web (2) Lorsqu'un navigateur effectue une requête (saisie ou clic d'une URL, ou envoi d'un formulaire), les étapes suivantes se déroulent : Les données de requête sont envoyées au serveur sous forme d'en-têtes dans une requête HTTP. Lorsque le serveur reçoit la requête, il analyse les en-têtes HTTP, notamment celui permettant de localiser le fichier demandé. Si le serveur trouve le fichier HTML demandé, il va envoyer au client un en-tête de réponse valide (Success) et les données créées par l'application. A la réception du document, le navigateur affiche le résultat à l'écran.

LA NORME CGI Installer et configurer un serveur Web Schéma de requête d'un navigateur à un serveur Web (3) Dans le cas d'un script CGI, le schéma est légèrement plus compliqué :

LA NORME CGI Installer et configurer un serveur Web Schéma de requête d'un navigateur à un serveur Web (4) Dans le cas d'un script CGI, le schéma est légèrement plus complqué : Les données de requête sont envoyées au serveur sous forme d'en-têtes de requête HTTP. Lorsque le serveur reçoit la requête, il analyse les en-têtes HTTP, notamment celui permettant de localiser le fichier demandé. Le serveur analyse l'extension du fichier, puis exécute l'application associée à ce type de fichier (l'interpréteur Perl dans le cas d'un script Perl). Il fournit alors à cette application les en-têtes de la requête HTTP (souvent sous forme de variable d'environnement). L'application va s'exécuter puis fournir des données de sortie (commençant par une formulation d'en-tête de la forme content-type : text/html) au serveur. Le serveur envoye au client un en-tête de réponse valide, ainsi que les données créées par l'application puis affiche le résultat à l'écran.

LA NORME CGI Installer et configurer un serveur Web Envoi des en-têtes HTTP Le serveur ne crée pas d'en-têtes pour les CGI. Un script CGI doit commencer par envoyer un en-tête HTTP correspondant au type de fichier qu'il transmet. Le rôle principal des CGI est de créer des pages dynamiques, l'en-tête HTTP correspondra la plupart du temps au type text/html. La première chaîne envoyée au navigateur est donc la suivante : Content-type : text/html\n\n Les deux sauts de ligne sont indispensables : Le premier sert simplement à retourner à la ligne ; Le second sert à créer a ligne vide séparant les en-têtes HTTP du corps du message (spécification du protocole HTTP).

LA NORME CGI Installer et configurer un serveur Web Exemple de script CGI en Perl Exemple de script tout simple permettant d'afficher une page web sur laquelle est écrit « Hello World » #! /usr/local/bin/perl print ''content-type : text/html\n\n''; print ''<HTML>''; print ''<HEAD>''; print ''<TITLE>Hello World</TITLE>''; print ''</HEAD>''; print ''<BODY>''; print ''Hello World !''; print ''</BODY>''; print ''</HTML>''; Exemple de script CGI pour une redirection d'URL #! /usr/local/bin/perl print ''location :http://www.commentcamarche.net'';

Configuration d'un Site Web Install & Config d'un Site Web Installer et configurer un serveur Web Installation & Configuration d'un Site Web

WampServer2 sous Windows Install & Config d'un Site Web Installer et configurer un serveur Web Installation de WampServer2 sous Windows

Install & Config d'un Site Web Installer et configurer un serveur Web Introduction à WAMP Wamp Server 2 est la nouvelle version de WAMP5. Wamp Server 2.0i est composé de Apache 2.2.11, MySQL 5.1.36, PHP 5.3.0. WampServer est une plate-forme de développement Web sous Windows. Il vous permet de développer des applications Web dynamiques à l'aide du serveur Apache2, du langage de scripts PHP et d'une base de données MySQL. Il possède également PHPMyAdmin et SQLite Manager pour gérer plus facilement vos bases de données. Nous allons voir comment installer Wamp server 2.0i en français. Lien pour téléchager Wamp server. http://www.wampserver.com/download.php

Install & Config d'un Site Web Installer et configurer un serveur Web Installer WampServer 2.0 Lorsque vous aurez téléchargé Wamp Server 2.0 sur le site officiel, exécutez "WampServer2.0i.exe" pour lancer l'installation. Si vous avez un avertissement de sécurité, confirmez votre souhait de lancer l'installation en cliquant sur "Exécuter" :

Install & Config d'un Site Web Installer et configurer un serveur Web Installer WampServer 2.0 (2)

Install & Config d'un Site Web Installer et configurer un serveur Web Installer WampServer 2.0 (3) Cliquez sur "Next" pour débuter réellement l'installation de Wamp server 2 :

Install & Config d'un Site Web Installer et configurer un serveur Web Installer WampServer 2.0 (4) Lisez puis validez la licence du logiciel, en sélectionnant "I accept the agreement", puis cliquez sur "Next" :

Install & Config d'un Site Web Installer et configurer un serveur Web Installer WampServer 2.0 (5) Sélectionnez un emplacement dans lequel vous souhaitez installer Wamp, ou laissez celui qui est proposé par défaut, puis cliquez sur "Next" :

Install & Config d'un Site Web Installer et configurer un serveur Web Installer WampServer 2.0 (6) Si vous voulez un raccourci de lancement rapide, cochez la case "Create a quick launch icon". Et/ou si vous souhaitez un raccourci sur votre bureau, cochez la case "Create a Desktop icon". Puis cliquez sur "Next" :

Install & Config d'un Site Web Installer et configurer un serveur Web Installer WampServer 2.0 (7) Enfin, cliquez sur "Install" :

Install & Config d'un Site Web Installer et configurer un serveur Web Installer WampServer 2.0 (8) A la fin de l'installation, il faut choisir le navigateur qu'on veut utiliser comme navigateur par défaut pour Wamp.

Install & Config d'un Site Web Installer et configurer un serveur Web Installer WampServer 2.0 (9) Attention : vous pouvez également avoir un avertissement de la part du pare-feu de Windows. Celui-ci vous demande si vous souhaitez bloquer le programme ou le débloquer. Cliquez sur "Débloquer" pour pouvoir utiliser Wamp server. Cela permettra au serveur Apache (web) de pouvoir écouter sur son port 80.

Install & Config d'un Site Web Installer et configurer un serveur Web Installer WampServer 2.0 (10) Le programme de configuration de Wamp vous demandera alors des précisions concernant le serveur SMTP que vous souhaitez utiliser. Ceci est nouveau dans Wamp, et permet de spécifier le nom du serveur smtp qui sera utilisé pour l'envoi des mails par la fonction mail() de PHP. Si vous avez un serveur mail capable d'envoyer des mails sur votre PC, vous pouvez mettre son nom (localhost..). Sinon, en règle générale, vous pouvez utiliser le serveur SMTP de votre fournisseur d'accès internet. Ici smtp.free.fr par exemple. Puis entrez votre adresse email, c'est l'adresse email de l'expéditeur qui apparaitra dans les emails envoyés, lorsque celle-ci n'est pas spécifiée dans vos scripts.

Install & Config d'un Site Web Installer et configurer un serveur Web Installer WampServer 2.0 (11) Cliquez sur "Next", puis sur "Finish". Vous pouvez laisser la case "Launch WampServer 2 now" cochée, afin de lancer Wamp immédiatement après la fin de l'installation.

Install & Config d'un Site Web Installer et configurer un serveur Web Installer WampServer 2.0 (12) Si Wamp se lance bien, vous devriez alors voir son icône en bas à droite de votre barre des tâches. Si vous avez du rouge sur l'icône, cela signifie qu'un ou des serveurs (apache, mysql..) n'ont pas réussi à se lancer.

Install & Config d'un Site Web Installer et configurer un serveur Web WampServer 2.0 en français Si vous le souhaitez, vous pouvez mettre Wamp server en français. Pour cela faites un clic droit sur cette icône, puis cliquez sur le menu "Language". Enfin cliquez sur "French" :

Install & Config d'un Site Web Installer et configurer un serveur Web WampServer 2.0 en français (2) Si vous faites maintenant un clic gauche sur l'icône de Wamp, vous voyez normalement que les menus sont bien en français :

Install & Config d'un Site Web Installer et configurer un serveur Web Test de WampServer 2.0 Vous pouvez désormais ouvrir votre navigateur internet, ouvrir l'adresse url "http://localhost". Si les services de Wamp sont bien lancés, vous devriez avoir la page d'accueil suivante :

Install & Config d'un Site Web Installer et configurer un serveur Web Conclusion Vous venez d'installer le serveur WAMP sur windows. Il contient apache, php, mysql, phpmyadmin et SQLiteManager, entre autres. Tout cela vous permettra de développer vos propres applications et sites web en php / mysql et de pouvoir les tester sur votre machine.

fichiers de configurations Install & Config d'un Site Web Installer et configurer un serveur Web Présentations des fichiers de configurations

Install & Config d'un Site Web Installer et configurer un serveur Web Serveur Apache httpd.conf Apache error log Apache access log

Install & Config d'un Site Web Installer et configurer un serveur Web Serveur Apache - httpd.conf Ce fichier se trouve dans le répertoire suivant

Install & Config d'un Site Web Installer et configurer un serveur Web Serveur Apache – httpd.conf (2) Ce fichier contient les directives propres au fonctionnement du serveur lui-même. Il existe plein d'information sur internet concernant les directives de configuration de ce fichier. Exemple de lien concernant les directives de configuration de ce fichier. http://www.linux-kheops.com/doc/redhat72/rhl-rg-fr-7.2/s1-apache-config.html

Install & Config d'un Site Web Installer et configurer un serveur Web Serveur Apache - access.log Ce fichier se trouve dans le répertoire suivant

Install & Config d'un Site Web Installer et configurer un serveur Web Serveur Apache – access.log (2) Ce fichier contient les informations concernant les accès à votre serveur. Chaque ligne est par défaut de la forme : 127.0.0.1 - - [30/May/1998:17:27:15 +0200] "GET /page1.shtml HTTP/1.0" 200 664 Les différents champs indiquent respectivement la provenance de la connexion, la date et l'heure de la connexion, la page vue et le code de lecture ainsi que la taille du fichier lu. Chaque ligne est appelée un hit et pour peu qu'une page html contienne 10 images, le fichiers logs contiendra 11 lignes relatives à l'envoi de cette page, ce qui fait souvent confondre le nombre de lecteurs et le nombre de connexions.

Install & Config d'un Site Web Installer et configurer un serveur Web Serveur Apache - error.log Ce fichier se trouve dans le répertoire suivant

Install & Config d'un Site Web Installer et configurer un serveur Web Serveur Apache – error.log (2) Ce fichier contient les erreurs produites par le serveur. C'est donc un fichier fort utile dans le cas de débugages de programmes CGI ou de surveillance d'une application ;

Install & Config d'un Site Web Installer et configurer un serveur Web Pour php php.ini PHP error log

Install & Config d'un Site Web Installer et configurer un serveur Web Pour php – fichier de configuration php.ini Ce fichier se trouve dans le répertoire suivant

Install & Config d'un Site Web Installer et configurer un serveur Web Pour php – fichier de configuration php.ini (2) Le fichier php.ini contient les paramètres de PHP. Il permet d’intervenir, pour les personnaliser, sur les répertoires et chemins d'accès des fichiers, les sessions et bases de données ainsi que l'activation d'extensions. Ce fichier porte le nom php.ini, il respecte la structure des fichiers INI bien connus de nombreuses applications Windows. Il s'agit d'un fichier texte ASCII divisé en plusieurs sections, chacune portant un nom et contenant des variables relatives à la section concernée. Chaque section ressemble au fragment suivant : [MaSection] variable="valeur" autrevariable="autrevaleur"

Install & Config d'un Site Web Installer et configurer un serveur Web Pour php – fichier de configuration php.ini (3) Le nom de la section figure au début entre crochets, suivi d'un certain nombre de paires nom/valeur, chaque paire figurant sur une ligne distincte. Comme pour tout code PHP, les noms des variables font la distinction entre majuscules et minuscules et ne peuvent pas contenir d'espace. Les valeurs peuvent quant à elles être numériques, booléennes ou correspondre à une chaîne. Un point-virgule placé en début d'une ligne indique des commentaires. Il est ainsi facile d'activer ou de désactiver une fonctionnalité PHP : plutôt que d'effacer une ligne, il vous suffit de la mettre en commentaires de sorte qu'elle ne soit pas analysée. C'est pratique si vous pensez avoir besoin de réactiver une fonctionnalité ultérieurement, puisque vous n'avez pas à la supprimer du fichier. Pour que PHP puisse reconnaître le fichier php.ini, vous devez le placer dans le répertoire en cours, le répertoire défini dans la variable d'environnement $PHPRC, ou bien le répertorie spécifié au moment de la compilation (pour PHP Windows, il s'agit du répertoire Windows principal).

Install & Config d'un Site Web Installer et configurer un serveur Web Pour php – fichier de configuration php.ini (4) Après avoir modifié la configuration de PHP dans son fichier php.ini, vous devrez redémarrer le serveur web pour que vos modifications soient prises en compte (à supposé, bien sûr, que vous utilisez PHP via le serveur web). Si vous utilisez PHP par la ligne de commande, le fichier de configuration sera lu chaque fois que vous appelez le programme binaire PHP. Pour en savoir plus sur le fichier php.ini http://php.net/manual/fr/ini.core.php http://www.php.documentation.givah.net/?p=ini.html

Configuration d'un site Web minima Install & Config d'un Site Web Installer et configurer un serveur Web Configuration d'un site Web minima

DEMO Install & Config d'un Site Web Installer et configurer un serveur Web Configuration d'un site Web DEMO

Lancement du site dans le navigateur Install & Config d'un Site Web Installer et configurer un serveur Web Lancement du site dans le navigateur

Install & Config d'un Site Web Installer et configurer un serveur Web Lancement du site dans le navigateur

Installation et configuration d'un serveur FTP Install & Config d'un serveur FTP Installer et configurer un serveur Web Installation et configuration d'un serveur FTP

Install & Config d'un serveur FTP Installer et configurer un serveur Web Rôle d'un serveur FTP Un serveur FTP (File Transfer Protocole) est utilisé dans le cas où l'on souhaite rendre disponible des fichiers (dans un réseau local ou sur internet) et ce que ce soit de manière anonyme ou grâce à des comptes utilisateurs. L'échange des fichiers peut se faire dans les 2 sens, soit en téléchargement à partir du serveur ftp (download) vers l'utilisateur (client) ou soit dans le sens contraire, en téléchargement à partir de l'utilisateur vers le serveur ftp (upload). Le serveur ftp pour l'installation et la configuration se nomme FileZilla Server (license open source1 et par ailleurs gratuit), il est disponible sur la page du projet FileZilla. La version actuellement est là : 0.9.34

Install & Config d'un serveur FTP Installer et configurer un serveur Web Installation du serveur FTP Téléchargement de la version sur le site http://www.01net.com/

Install & Config d'un serveur FTP Installer et configurer un serveur Web Installation du serveur FTP Une fois l'installation lancée, vous aurez l'écran suivant qui s'affiche. Il a pour but de présenter la licence qu'utilise FileZilla.Cliquer sur J'accepte.

Install & Config d'un serveur FTP Installer et configurer un serveur Web Installation du serveur FTP (2) Là, l'écran suivant s'affiche pour vous demander les paramètres d'installation (Type d'installation) : Il y a 5 types d'installation disponibles : Standart, Complète, Service uniquement, Interface uniquement ou Personnalisée. Ou par choix des composants (Filezilla Server (service), interface d'administration, code source, raccourcis dans le menu démarrer ou icône sur le bureau). Concernant la place nécessaire à l'installation, elle va de 2,8 mo (Standart) à 9,7 mo (Complète).

Install & Config d'un serveur FTP Installer et configurer un serveur Web Installation du serveur FTP (3) L'écran suivant vous demande le répertoire de destination (Dossier d'installation) de l'application.

Install & Config d'un serveur FTP Installer et configurer un serveur Web Installation du serveur FTP (4) Ici, nous arrivons à la partie qui va nous permettre de choisir si l'on veut installer notre serveur FTP en tant que service.

Install & Config d'un serveur FTP Installer et configurer un serveur Web Installation du serveur FTP (5) Détaillons les différentes options disponibles : Installer comme un service, démarré avec Windows (défaut) : ➔ Le serveur ftp est installé en tant que service et démarre en même temps que Windows (c'est l'option par défaut). Utile si votre serveur ftp doit tourner de façon ininterrompue sans pour autant être relancé par une personne à chaque fois que la machine redémarre. Installer comme un service, démarré manuellement : ➔ Le serveur ftp est installé en tant que service mais démarre manuellement (grâce au raccourci adéquate dans le menu de FileZilla Server). Utile si vous pensez utiliser votre serveur ftp de façon occassionnel. Ne pas installer comme un service, démarrage manuel (non recommandé) : ➔ Le serveur ftp n'est pas installé en tant que service et démarre de manière manuel. L'option qui pourrait être utilisée si vous n'êtes pas sous un environnement XP ou 2000 mais que vous souhaitez avoir un serveur ftp. Le port (par défaut) utilisé pour l'administration du serveur ftp est 14147, bien entendu vous pouvez le changer pour répondre à vos besoins, le port dans ce cas doit être compris entre 1 et 65535. Par ailleurs, il faudra faire attention à ne pas allouer un port qui serait déjà utilisé, exemple: 80 (si vous possédez un serveur web sur la machine cela conduira à des problèmes).

Install & Config d'un serveur FTP Installer et configurer un serveur Web Installation du serveur FTP (6) Là, que nous avons vu l'installation du service, voyons le type de démarrage pour l'interface d'administration.

Install & Config d'un serveur FTP Installer et configurer un serveur Web Installation du serveur FTP (7) Démarrer si un utilisateur se connecte, appliquer à tous les utilisateurs (défaut) : ➔ Démarre l'interface d'administration du serveur ftp, si l'utilisateur est logué et applique l'option à tous les utilisateurs (c'est l'option par défaut). Ce qui permettra le lancement de l'interface d'administration par quiconque possédant un compte utilisateur sur la machine. Démarrer si un utilisateur se connecte, appliquer uniquement à l'utilisateur courant : ➔ Démarre l'interface d'administration du serveur ftp, si l'utilisateur est logué et applique l'option à l'utilisateur courant uniquement. Ce qui permettra de restreintre le lancement de l'interface d'administration au seul compte utilisateur ayant procédé à l'installation du serveur ftp. Démarrer manuellement : L'interface d'administration du serveur ftp sera lancée de manière manuelle. Tout le monde peut lancer l'interface d'administration de manière manuelle.

Install & Config d'un serveur FTP Installer et configurer un serveur Web Installation du serveur FTP (8) Installation en cours... la fenêtre suivante s'affiche : Cette boite de dialogue va permettre la connexion au serveur ftp. Les informations concernant le serveur ftp sur lequel on veut se connecter sont les suivantes : Adresse du Serveur : Correspond à l'adresse IP (ici l'adresse localhost de la machine) du serveur ftp sur lequel on veut se connecter. Bien entendu cela peut aussi correspondre à un nom de domaine dont on administre le serveur ftp à distance. Port : Port d'administration du serveur ftp (14147 par défaut). Mot de passe : Si vous administrez un serveur ftp sur un réseau local ou sur internet, vous devez spécifier le mot de passe qui protège la partie administration du serveur. Toujours se connecter à ce serveur : Cette option permet de stipuler si on effectue toujours la connexion sur ce serveur. A choisir si vous n'avez pas plusieurs serveurs ftp à administrer.

Install & Config d'un serveur FTP Installer et configurer un serveur Web Configuration du serveur FTP Si tout c'est bien passé, l'écran suivant doit être affiché : Ceci est l'interface d'admin du serveur FTP

Install & Config d'un serveur FTP Installer et configurer un serveur Web Configuration du serveur FTP (2) Le but n'est pas de d'écrire toute l'interface d'administration du serveur FTP, mais voir comment on l'utilise. Création des comptes utilisateurs : Cette option affiche la fenêtre qui permet de définir les utilisateurs (ainsi les options ayant trait à leurs comptes) de votre serveur ftp.

Install & Config d'un serveur FTP Installer et configurer un serveur Web Accès au serveur FTP Deux moyens pour accèder au serveur FTP, soit par le client FileZilla, soit par un navigateur Web. Client FileZilla

Install & Config d'un serveur FTP Installer et configurer un serveur Web Accès au serveur FTP – Navigateur Web

Principe de fonctionnement Fonctionnement Site Web / Navigateur Installer et configurer un serveur Web LE NAVIGATEUR WEB Principe de fonctionnement

Fonctionnement Site Web / Navigateur Installer et configurer un serveur Web Le navigateur web : présentation et fonctionnement Le navigateur web est le logiciel permettant aux internautes de « surfer » entre les pages des sites web qu'ils consultent. Présentation Principe de fonctionnement Les fonctionnalités des navigateurs

Fonctionnement Site Web / Navigateur Installer et configurer un serveur Web Présentation Un navigateur web est un logiciel conçu pour sufer sur le World Wide Web et en consulter les pages. Sur le plan technique, un navigateur est au minimum un client Http c'est-à-dire un logiciel conçu pour se connecter à un serveur HTTP. Celui-ci comprend un moteur de rendu des standards du web, une interface utilisateur et, eventuellement, un gestionnaire d'extensions ou plugins. La grande majorité des navigateurs présentent une interface utilisateur composée d'une zone d'affichage, d'une barre de menus déroulants, d'une barre d'outils et d'une barre d'état.

Fonctionnement Site Web / Navigateur Installer et configurer un serveur Web Principe de fonctionnement Le rôle d'un navigateur web est principalement de permettre la consultation des informations disponibles sur le web. Pour consulter une page, l'utilisateur doit indiquer au navigateur Web l'adresse (URL) de cette page. Pour ce faire, il peut : Taper l'adresse Web dans la barre d'adresse du navigateur ; Choisir une ressource dans sa liste de favoris ; Suivre un lien hypertexte pour accéder à une autre page. Le navigateur se connecte au serveur Web hébergeant la ressource et la télécharge, en utilisant le protocole HTTP. Le moteur de rendu du navigateur traite la ressource et affiche le résultat sur l'écran. L'interface graphique sert à afficher le résultat et présente des boutons de navigation, une barre d'adresse et une barre d'état.

Fonctionnement Site Web / Navigateur Installer et configurer un serveur Web Les fonctionnalités des navigateurs Un navigateur Web est capable, au minimum, d'afficher le texte d'une page Web. Les navigateurs fonctionnent couramment en mode graphique: ils sont capables d'afficher une typographie élaborée, des images et des animations et d'interagir avec les actions de l'utilisateur. Le langage HTML indique au navigateur le texte à afficher ainsi que la structure générale de la mise en page. L'utilisation du CSS pemet de définir une mise en page plus élaborée avec des marges, alignements, espacements, couleurs et bordures. La plupart des navigateurs permettent aussi d'imprimer les pages Web. Les navigateurs exécutent des scripts pour réaliser des tâches simples (vérifier les données d'un formulaire ou gérer des menus …). JavaScript est le principale langage de script utilisé sur le web.

Comment le site Web interagit avec le Navigateur Intéraction avec le Navigateur Installer et configurer un serveur Web Comment le site Web interagit avec le Navigateur

Intéraction avec le Navigateur Installer et configurer un serveur Web Le protocole HTTP Le protocole HTTP est le protocole le plus utilisé sur Internet depuis 1990. La version 0.9 était uniquement destinée à transérer des données sur Internet (en particulier des pages Web écrites en HTML). La version 1.0 du protocole (la plus utilisée) permet désormais de transférer des messages avec des en-têtes décrivant le contenu du message en utilisant un codage de type MIME. Le but du protocole HTTP est de permettre un transfert de fichiers localisés grâce à une chaîne de caractères appelée URL entre un navigateur (le client) et un serveur Web (appelé d'ailleurs httpd sur les machines Unix).

Intéraction avec le Navigateur (2) Installer et configurer un serveur Web Communication entre navigateur et serveur La communication entre le navigateur et le serveur se fait en deux temps. Le navigateur effectue une requête HTTP Le serveur traite la requête puis envoie une réponse HTTP

Intéraction avec le Navigateur (3) Installer et configurer un serveur Web Requête HTTP Une requête HTTP est un ensemble de lignes envoyées au serveur par le navigateur. Elle comprend : Une ligne de requête : c'est une ligne précisant le type de document demandé, la méthode qui doit être appliquée, et la version du protocole utilisée. La ligne comprend trois éléments devant être séparés par un espace : La méthode L'URL La version du protocole utilsé par le client (généralement HTTP/1.0) Les champs d'en-tête de la requête : il s'agit d'un ensemble de lignes facultatives permettant de donner des informations supplémentaires sur la requête et/ou le client (Navigateur, système d'exploitation). Chacune de ces lignes est composée d'un nom qualifiant le type d'en-tête, suivi de deux points (:) et de la valeur de l'en-tête.

Intéraction avec le Navigateur (4) Installer et configurer un serveur Web Requête HTTP (2) Le corps de la requête : c'est un ensemble de lignes optionnelles devant être séparées des lignes précédentes par une ligne vide et permettant par exemple un envoi de données par une commande POST lors de l'envoi de données au serveur par un formulaire. Une requête HTTP a donc la syntaxe suivante (<crlf> signifie retour chariot ou saut de ligne) : METHODE URL VERSION<crlf> EN-TÊTE : Valeur<crlf> . Ligne vide<crlf> CORPS DE LA REQUÊTE Exemple : GET http://www.commentcamarche.net HTTP/1.0 Accept : text/html User-Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows XP)

Intéraction avec le Navigateur (5) Installer et configurer un serveur Web Réponse HTTP Une réponse HTTP est un ensemble de lignes envoyées au navigateur par le serveur. Elle comprend : Une ligne de statut : c'est une ligne précisant la version du protocole utilisé et l'état du traitement de la requête à l'aide d'un code et d'un texte explicatif. La ligne comprend trois éléments devant être séparés par un espace : La version du protocole utilisé Le code de statut La signification du code Les champs d'en-tête de la réponse : il s'agit d'un ensemble de lignes facultatives permettant de donner des informations supplémentaires sur la réponse et/ou le serveur. Chacune de ces lignes est composée d'un nom qualifiant le type d'en-tête, suivi de deux points (:) et de la valeur de l'en-tête.

Intéraction avec le Navigateur (6) Installer et configurer un serveur Web Réponse HTTP (2) Le corps de la réponse : il contient le document demandé Une réponse HTTP a donc la syntaxe suivante : VERSION-HTTP CODE EXPLICATION<crlf> EN-TÊTE : Valeur<crlf> . Ligne vide<crlf> CORPS DE LA REPONSE Exemple : HTTP/1.0 200 OK Date : Sat, 21 Aout 2010 14:38:12 GMT Server : Microsoft-IIS/2.0 Content-Type : text/html Content-Length : 1245 Last-Modified : Fri, 20 Aout 2010 09:23:12 GMT

Fonctionnement d'un site Internet / Intranet Installer et configurer un serveur Web Fonctionnement d'un site Internet / Intranet

Site Internet / Intranet Installer et configurer un serveur Web Fonctionnement d'un site Internet / Intranet Un site Internet et un site Intranet fonctionnent selon un principe similaire. Dans les deux cas, une machine dédiée à la distribution de pages Web et de documents liées est pilotée par un logiciel spécial appelé « logiciel Serveur Web ». Ce serveur possède une adresse IP pour être joignable sur le réseau et généralement un nom est associé à cette adresse pour retrouver ce serveur plus facilement. La relation entre l'adresse IP et le nom sera fait par un logiciel spécifique : le serveur DNS (Domaine Name Server). Tout fournisseur d'accès Internet (F.A.I) met un tel serveur à disposition de ses clients.

Site Internet / Intranet (1) Installer et configurer un serveur Web Accès au serveur depuis Internet Nous voulons accéder au site www.bidule.com. Pour cela, l'adresse en question est tapée dans la barre d'adresse du navigateur. Lors de la validation, la machine va se connecter au F.A.I et demander à son serveur DNS quelle est l'adresse correspondante à ce site. Le serveur DNS du F.A.I indique à notre machine que www.bidule.com possède l'adresse IP 194.254.2.250. A ce moment, le navigateur affiche en général qu'il a trouvé le site et commence à lancer une recherche sur Internet avec cette adresse.

Site Internet / Intranet (2) Installer et configurer un serveur Web Accès au serveur depuis Internet (2) De proche en proche, la demande va transiter jusqu'à atteindre le serveur. Le serveur 194.254.2.250 a reçu notre demande et met en action son logiciel serveur web. Celui-çi va examiner la demande et chercher si nous avons demandé une page en particulier. Si ce n'est pas le cas, le serveur web va renvoyer la page par défaut, en général index.htm (ou index.html ou index.php).

Site Internet / Intranet (3) Installer et configurer un serveur Web Accès au serveur depuis Internet (3) Le serveur Web va découper cette page en petits paquets et renvoyer chacun de ces paquets avec notre adresse IP. Suivant le trafic des différentes liaisons sur Internet, chacun de ces paquets peut emprunter une voie différente pour revenir à la machine qui avait demandé la page. Les informations seront affichées en fonction de leur arrivée, à conditions qu'elles se suivent : si le premier paquet manque, rien ne s'affichera en attendant son arrivée. En même temps que la page s'affiche, le navigateur va interpréter le document et va éventuellement être obligé de lancer de nouvelles demandes vers Internet pour récupérer les images liées à la page.

Site Internet / Intranet (4) Installer et configurer un serveur Web Fonctionnement Serveur de messagerie SMTP : Simple Mail Transfer Protocol assure le transfert du courrier depuis le PC de l'utilisateur vers le serveur de messagerie (smtp.free.fr). POP3 : Post Office Protocol assure le transfert du courrier depuis le serveur de messagerie vers la station de l'utilisateur (pop.free.fr). IMAP : Interactive Mail Access Protocol assure le transfert du courrier depuis le serveur de messagerie vers la station de l'utilisateur (pop.free.fr).

Site Internet / Intranet (5) Installer et configurer un serveur Web Fonctionnement Serveur de messagerie (2)

Site Internet / Intranet (6) Installer et configurer un serveur Web Connecter son entreprise – Accès vers l'extérieur : Proxy Un Proxy permet de partager une connexion, c'est-à-dire qu'il offre un accès aux ordinateurs du réseau par procuration, en redirigeant les informations (généralement les pages web demandées par les ordinateurs du LAN). Toutefois, plus le nombre d'utilisateur est important, plus la bande passante pour chacun sera faible car les utilisateurs se partagent la bande passante du proxy.

Site Internet / Intranet (7) Installer et configurer un serveur Web Connecter son entreprise – Accès vers l'extérieur : Routeur Les Routeurs sont les dispositifs permettant de « choisir » le chemin que les datagrammes vont emprunter pour arriver à destination. Internet est un ensemble de réseaux connectés. Par conséquent tous les routeurs ne font pas le même travail selon le type de réseau sur lequel ils se trouvent. Les routeurs noyaux sont les routeurs principaux car ce sont eux qui relient les différents réseaux. Les routeurs externes permettent une liaison des réseaux autonomes entre eux. Ils fonctionnent avec un protocole appelé EGP (Exterior Gateway Protocol) qui évolue petit à petit en gardant la même appellation. Les routeurs internes permettent le routage des informations à l'intérieur d'un réseau autonome. Ils s'échangent des informations grâce à des protocoles appelés IGP (Interior Gateway Protocol).

Site Internet / Intranet (8) Installer et configurer un serveur Web Connecter son entreprise – Accès vers l'extérieur : Routeur Routeur noyau Routeur externe Routeur interne Réseau autonome Réseau autonome

Site Internet / Intranet (9) Installer et configurer un serveur Web Connecter son entreprise – Contrôler les accès depuis ou vers l'extérieur : Firewall Un pare-feu : système qui protège un réseau d'instrusions de l'extérieur et/ou de l'intérieur. Le pare-feu est en réalité un système permettant de bloquer des ports TCP , c'est-à-dire en interdire l'accès aux personnes provenant de l'extérieur. Port : numéro associé à un service ou une application réseau.

Site Internet / Intranet (10) Installer et configurer un serveur Web Connecter son entreprise – Contrôler les accès depuis ou vers l'extérieur : pare-feu windows

Site Internet / Intranet (11) Installer et configurer un serveur Web Connecter son entreprise – Contrôler les accès depuis ou vers l'extérieur : pare-feu windows

Site Internet / Intranet (12) Installer et configurer un serveur Web Fonctionnement d'un Intranet - Présentation Un Intranet est un ensemble de services Internet (par exemple un serveur Web) internes à un réseau local, c'est-à-dire accessibles uniquement à partir des postes d'un réseau local, ou bien d'un ensemble de réseaux bien définis, et invisible de l'extérieur. Il consiste à utiliser les standards client-serveur de l'Internet, pour réaliser un système d'information interne à une organisation ou une entreprise. Un intranet repose généralement sur une répartition, composée : De clients (navigateur Internet généralement) ; D'un ou plusieurs serveurs d'application: un serveur Web permettant d'interpréter des scripts PHP, ASP ou autres, et les traduire en requêtes SQL afin d'interroger une base de données ; d'un serveur base de données.

Site Internet / Intranet (13) Installer et configurer un serveur Web Intranet – site externe protégé (avec mot de passe) On pourra ensuite se déconnecter

Site Internet / Intranet (14) Installer et configurer un serveur Web Intranet – site interne protégé (sans mot de passe)

Site Internet / Intranet (15) Installer et configurer un serveur Web Intranet - Accès Un Intranet dans une entreprise permet de mettre facilement à la disposition des employés des documents divers et variés; cela permet d'avoir un accès centralisé et cohérent à la mémoire de l'entreprise, on parle ainsi de capitalisation de connaissances. De cette façon, il est généralement nécessaire de définir des droits d'accès pour les utilisateurs de l'intranet aux documents présents sur celui-ci, et par conséquent une authentification de celui-ci afin de leur permettre un accès personnalisé à certains documents. Nom d'utilisateur (login) Mot de passe

Site Internet / Intranet (16) Installer et configurer un serveur Web Intranet – Les services Un Intranet peut rendre les services suivants : Mise à disposition d'informations sur l'entreprise (panneau d'affichage) Mise à disposition de documents techniques Moteur de recherche de documentations Un échange de données entre collaborateurs Annuaire du personnel Gestion de projets, agenda, aide à la décision Messagerie éléctronique Forums de discussion, listes de diffusions, chat en direct Portail vers Internet De cette façon un intranet favorise la communication au sein de l'entreprise et limite les erreurs dues à la mauvaise circulation d'une information. L'information disponible sur l'intranet doit être mise à jour en évitant les conflits de version.

Site Internet / Intranet (17) Installer et configurer un serveur Web Fonctionnement d'un Extranet – Accès depuis l'extérieur Extension du système d'information de l'entreprise à des partenaires situés au -delà du réseau. L'accès à l'Extranet doit être sécurisé dans la mesure où cela offre un accès au système d'information à des personnes situées en dehors de l'entreprise. Authentification simple (nom d'utilisateur et mot de passe) Authentification forte (authentification à l'aide d'un script)

Site Internet / Intranet (18) Installer et configurer un serveur Web Fonctionnement d'un Extranet – Accès depuis l'extérieur Il est conseillé d'utiliser la cryptographie pour toutes les pages web consultées depuis l'extérieur afin de sécuriser le transport des requêtes et des réponses et d'éviter notamment la circulation du mot de passe en clair sur le réseau. De cette façon, un extranet n'est ni un intranet, ni un site internet, il s'agit d'un système supplémentaire offrant par exemple aux clients d'une entreprise, à ses partenaires ou à des filiales, un accès privilégié à certaines ressources informatiques de l'entreprise par l'intermédiaire d'une interface Web.

Conception & Réalisation de pages Web Installer et configurer un serveur Web Conception & Réalisation de pages Web

Notion d'hypertexte & d'hypermédia Conception & Réalisation Installer et configurer un serveur Web Notion d'hypertexte & d'hypermédia

Conception & Réalisation Installer et configurer un serveur Web Hyperlien = Références entre documents Navigation d'un document à un l'autre

Conception & Réalisation Installer et configurer un serveur Web Hypertexte enrichi du Multimédia Images, Sons, Vidéos, Animations contenant des zones sensibles (boutons,...)

LE LANGAGE HTML Conception & Réalisation Installer et configurer un serveur Web LE LANGAGE HTML

Conception & Réalisation Installer et configurer un serveur Web HTML – HyperText Markup Language Hypertexte → lien dans un document pointe vers autre document Markup Language → code pour marquer des zones dans un document Né en 1989 au CERN (Organisation européenne pour la Recherche nucléaire) basé sur SGML (Standard Generalized Markup Language) Spécifié par le W3C (World Wide Web Consortium) http://www.w3.org/TR/html4/

Conception & Réalisation Installer et configurer un serveur Web Langage de Description de Documents HyperTextuels Description textuelle du Document Edition manuelle possible Génération de documents par programmation (CGI,Perl) Apparation d'outils WYSIWYG (FrontPage, DreamWeaver,...) Structuration hiérarchique à la SGML Elément HTML décrit par balisage (tag) du texte <ELEMENT ATTR=VALUE> … </ELEMENT> Il existe une DTD (Définition de Type de Document) publique HTML

Conception & Réalisation Installer et configurer un serveur Web Principe du HTML Fonctionne sous la base de la balise (ou tag) Ex: <html>, <p>, <table> Une balise formate le document en entier ou une partie du texte A chaque balise correspond une balise fermante, ce qui limite l'effet de balise <p>Ceci est un paragraphe.</p> Les retours de chariot ou les espaces blancs ne sont pas pris en compte

Conception & Réalisation Installer et configurer un serveur Web Principe du HTML (2) Un document HTML peut être édité Dans un simple éditeur de texte A l'aide d'éditeurs plus ou moins sophistiqués (grand choix sur @) Généré par un traitemente de texte (« Sauver sous... », mais le code n'est pas très bon) Nombreux éditeurs shareware ou freeware sont disponibles Exemples d'éditeurs : - Adobe Dreamweaver : http://www.adobe.com/fr/products/dreamweaver - Microsoft expression (Frontpage) : http://www.microsoft.com/france/expression/default.aspx

Conception & Réalisation Installer et configurer un serveur Web Premier exemple de document HTML

Conception & Réalisation Installer et configurer un serveur Web Fichier HTML Le document à l'extension .html ou htm Simple texte → facile à modifier La page principale dans un répertoire se nomme index.htm(l), (parfois aussi welcome.htm(l) ou default.htm(l)) C'est cette page qui est affichée par défaut si rien n'est spécifié Exemples dans notre site minima : - http://localhost/monsite/ Equivalent de : - http://localhost/monsite/index.html

Conception & Réalisation Installer et configurer un serveur Web Structure générale d'un document HTML

Conception & Réalisation Installer et configurer un serveur Web Les balises Les balises sont emboîtées <p>Ceci est un paragraphe avec un mot <b>en gras</b>.</p> Balise non sensibles à la casse : <b> = <B>, <b> </B> toléré Une balise peut avoir des attributs <p align=''center''>Paragraphe centré</p> <html> </html> marque début et fin d'un document <head> marque l'en-tête du document <body> marque le corps du document Balises obligatoires

Conception & Réalisation Installer et configurer un serveur Web Structure d'un document HTML

Conception & Réalisation Installer et configurer un serveur Web Entête d'un document HTML - <head>...</head> <title> marque le titre du document Apparaît dans la barre de titre du navigateur et utilisé pour les signets (bookmarks) Attention: n'apparaît dans le corps du texte <meta> contient la méta-information <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> contient le code de caractère utilisé par le document , assez important

Conception & Réalisation Installer et configurer un serveur Web Caractères accentués et spéciaux Exemples : a < b if c>d a < b if c>d a < b if c>d

Conception & Réalisation Installer et configurer un serveur Web Caractères accentués et spéciaux (2)

Conception & Réalisation Installer et configurer un serveur Web La balise META Description du document Faciliter l'indexation Faciliter la sélection des documents Metadata de HEAD décrivant le document <META NAME=''cle'' CONTENT=''valeur''> <meta NAME=''keywords'' CONTENT=''computer,center,home,menu, ...''>

Conception & Réalisation Installer et configurer un serveur Web Exemple de la balise META (2)

Conception & Réalisation Installer et configurer un serveur Web Corps d'un document HTML <body> marque le corps du document Attributs background='''' couleur de fond text couleur du texte link couleur des liens visités vlink couleur des liens visités alink couleur des liens actifs On préfère définir ces choses dans une feuille de style (notion CSS)

Conception & Réalisation Installer et configurer un serveur Web Couleurs Code RGB = Red Green Blue Signe # 6 chiffres hexas, 2 digits par couleur #000000 = noir (ou utiliser ''black'') #ffffff = blanc = white #ff0000 = rouge = red #0000ff = bleu = blue ... Autre notation possible rgb (rouge[0-255], vert[0-255], bleu[0-255]) Exemples : rgb(255,0,0) = #ff0000 = rouge

Conception & Réalisation Installer et configurer un serveur Web Principaux marquages de texte Un paragraphe est marqué par <p> </p> Les différents titres sont marqués par <h1>,<h2>, ...<h6> (ordre décroissant) <p> ou <h1> etc : paramètre align=''left'', ''right'', ''center'' ... <br> insère un simple saut de ligne <address> permet de faire un pied de page (copyright, adresse webmaster...)

Conception & Réalisation Installer et configurer un serveur Web Les titres - Exemple

Conception & Réalisation Installer et configurer un serveur Web Formatage du texte <sup> pour mise en exposant <sub> pour indices <b> pour gras (bold) <i> pour italiques <u> pour souligné (underline) <big> pour texte plus grand <small> pour texte plus petit <strikel> et <s> pour barré

Conception & Réalisation Installer et configurer un serveur Web Les commentaires

Conception & Réalisation Installer et configurer un serveur Web Police et taille du texte

Conception & Réalisation Installer et configurer un serveur Web Police et taille du texte - Exemples

Conception & Réalisation Installer et configurer un serveur Web Barre séparatrice horizontale <hr> (pas fermée) size pour taille (épaisseur) width taille en pixels ou en % (width=''50%'') noshade=''noshade'' Align = ''left'', ''center'', ''right'', ...

Conception & Réalisation Installer et configurer un serveur Web Listes

Conception & Réalisation Installer et configurer un serveur Web Listes (2) Plusieurs niveaux emboîtables, types de liste également (indentation des niveaux juste pour clarté visuelle)

Conception & Réalisation Installer et configurer un serveur Web Listes (3) - Exemple

Conception & Réalisation Installer et configurer un serveur Web Listes de définitions Ouverture d'une liste <dl> Terme à définir <dt> Définitions <dd>

Conception & Réalisation Installer et configurer un serveur Web Listes de définitions - Exemple

Conception & Réalisation Installer et configurer un serveur Web Les hyperliens HyperLien vers un autre document (ou une partie du document) Sur un texte, le lien se présente sous la forme d'un texte souligné de couleur bleue Sur une image, un cadre de couleur bleue entoure celle-ci Les liens LINK <head> <title>Titre 1</title> <link rel=''prev'' href=''lien1.html> <link rel=''next'' href=''lien2.html> </head>

Conception & Réalisation Installer et configurer un serveur Web URL (Uniform Ressource Locator) URL absolue Format d'une URL pour HTTP, FTP protocole://dnsmachine:port/rep/fic#target

Conception & Réalisation Installer et configurer un serveur Web Créer un hyperlien Créer un lien (sur image ou texte) <a> Paramètre href → URL de la page à atteindre Paramètre target=''_blank'' → nouvelle fenêtre navigateur Exemple : <a href=''http://localhost/monsite/contact.html target=''_blank''> la page contact </a>

Conception & Réalisation Installer et configurer un serveur Web Notion de port TCP/IP Port TCP/IP → lieu de connexion logique parfois associée à un protocole (20 ou 21 = ftp, 80 ou 8000 = http) On peut installer plusieurs serveurs Web sur une même machine mais écoutant sur des ports différents On peut attribuer un port à une partie de l'URL du site pour éviter d'avoir un nom long pour y accéder Adresse serveur : port Exemple : http://geosoa.scg.uparis.ca:8080 http://132.203.82.194:80

Conception & Réalisation Installer et configurer un serveur Web Les images Insérer une image <img> Source de l'image (avec URI) src Description alternative alt. Peut servir comme indice car affiché si la souris survole l'image. Taille en pixels width et height. Permet d'accélérer l'affichage du texte en cas de connexion lente. Espace autour hspace et vspace (pixels) Bordure autour border (en pixels) border=''0'' si l'image sert de lien Alignement align=''bottom|middle|top|left|right| ... ''

Conception & Réalisation Installer et configurer un serveur Web Les images (2) - Exemple

Conception & Réalisation Installer et configurer un serveur Web Les balises DIV et SPAN Mécanisme général de groupement d'éléments et d'augmentation de la structure DIV pour ''block-level'' SPAN pour ''inline'' Pas de sémantique, utilisable avec les styles (très utilisées avec les feuilles de style CSS)

Conception & Réalisation Installer et configurer un serveur Web Les balises DIV et SPAN – Exemple 1

Conception & Réalisation Installer et configurer un serveur Web Les balises DIV et SPAN – Exemple 2

Conception & Réalisation Installer et configurer un serveur Web Les tableaux Clé de toute mise en page Elément <table> Légende de tableau <caption> Nouvelle ligne de tableau (table row) <tr> Nouvelle cellule de tableau (table data) <td> Cellules de titre (table head) <th> On préfère utiliser les feuilles de styles CSS pour réaliser des mises en page évoluées

Conception & Réalisation Installer et configurer un serveur Web Les tableaux - Exemple

Conception & Réalisation Installer et configurer un serveur Web L'élément <table> border → taille de bordure du tableau en pixels width → largeur du tableau en pixels ou % align → alignement du tableau cellspacing → espace entre cellules en pixels cellpadding → espace à l'intérieur des cellules en pixels bgcolor → couleur de fond

Conception & Réalisation Installer et configurer un serveur Web Alignement des cellules Dans <tr> → alignement pour toute la ligne Dans <td> <th> → alignement pour une cellule Alignement horizontal align left, center, right, justify align=''char'' char=''.'' → valeur numérique, alignement sur point Alignement vertical valign top, middle, bottom baseline tous les contenus alignés sur la même ligne de base

Conception & Réalisation Installer et configurer un serveur Web Fusionner des cellules Pratique pour les en-têtes Attribut colspan dans <td> ou <th> → étendue de la colonne (enlever x cellules dans la ligne pour garder le même nombre de colonnes dans tout le tableau) Attribut rowspan dans <td> ou <th> → étendue de la ligne (les lignes suivantes doivent avoir x cellules en moins) Il est facile de se perdre pour étendre correctement les données

Conception & Réalisation Installer et configurer un serveur Web Les tableaux – Exemple récapitulatif

LES FEUILLES DE STYLES CSS Conception & Réalisation Installer et configurer un serveur Web LES FEUILLES DE STYLES CSS Cascading Style Sheets

Conception & Réalisation Installer et configurer un serveur Web Feuilles de style en cascade Regrouper dans un même document des caractèristiques de mise en forme associées à des groupes d'éléments. Définition de plusieurs styles possibles et héritage des styles en cascade. Fournir une plus grande richesse d'éléments de style graphique afin d'améliorer l'apparence des documents HTML.

Conception & Réalisation Installer et configurer un serveur Web Les Feuilles de style permettent Obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à une même définition de style. Permettre le changement de l'aspect d'un site complet entier par la seule modification de quelques lignes. Une plus grande lisibilité du HTML, car les styles sont définis à part. Chargements de page plus rapides. Un positionnement plus rigoureux des éléments.

Conception & Réalisation Installer et configurer un serveur Web Trois niveaux de CSS CSS Level 1, CSS Positionning, CSS 2 Cascading Style Sheets CSS 2.1 pour HTML et XML http://www.w3.org/TR/CSS21/ Nouvelle spécification en cours : CSS 3 Support de CSS par les navigateurs IE 6, 7, 8 Firefox x.x Opera 10.6x Safari 5.x

Conception & Réalisation Installer et configurer un serveur Web Incorporation de CSS dans HTML Feuille de style interne Feuille de style externe

Conception & Réalisation Installer et configurer un serveur Web Incorporation de CSS dans HTML (2) Feuille de style en ligne Balises non concernées par l'application de styles : BASE,BASEFONT,HEAD,HTML,META,SCRIPT,STYLE. Feuille de style importé

Conception & Réalisation Installer et configurer un serveur Web Définition de styles externes et cascadés

Conception & Réalisation Installer et configurer un serveur Web Les balises SPAN et DIV Appliquer des styles à des paragraphes ou des morceaux de paragraphes La balise SPAN Permet de modifier des morceaux de paragraphes <SPAN class=Nom_de_la_classe> Texte </SPAN> La balise DIV Permet de modifier des blocs de paragraphes <DIV class=important> Paragraphes </DIV> Exemple : Vous constatez que ce texte n'est pas totalement en vert.

Conception & Réalisation Installer et configurer un serveur Web Styles en cascade Plusieurs feuilles peuvent être associées à un même document Plusieurs définitions de style peuvent affecter le même tag dans la même feuille h1{color:red;} p{...} … h1{font-size:20pt} équivaut à h1{color:red; font-size:20pt} La dernière valeur spécifiée écrase les précédentes

Conception & Réalisation Installer et configurer un serveur Web Styles en cascade (2) - Exemple

Conception & Réalisation Installer et configurer un serveur Web Plusieurs feuilles de styles Plusieurs feuilles associées au document La dernière définition d'un tag l'emporte sur les autres <link rel=''stylesheet'' type=''text/css'' href=''style1.css''> <link rel=''stylesheet'' type=''text/css'' href=''style2.css''> <link rel=''stylesheet'' type=''text/css'' href=''style3.css''> Styles alternatifs → sélectionnables suivant le browser <link rel=''alternate stylesheet'' type=''text/css'' href=''style1.css'' title=''style1''> <link rel=''alternate stylesheet'' type=''text/css'' href=''style2.css'' title=''style2''> <link rel=''stylesheet'' type=''text/css'' href=''stylepardefaut.css''>

Conception & Réalisation Installer et configurer un serveur Web Notion d'héritage Un élément X contenu dans un élément Y va hériter des propriétés de cet élément Y

Conception & Réalisation Installer et configurer un serveur Web Définition d'un style Ensemble de règles en texte simple permettant de décrire l'aspect des éléments de la page Une règle CSS contient 2 éléments principaux Un sélecteur de style précisant à quelle balises appliquer le style Une déclaration de style définie entre accolade ''{}'' Une ou plusieurs propriétés : suivie du caractère '':'' Une ou plusieurs valeurs : séparée par des virgules et suivie du caractère '';''

Conception & Réalisation Installer et configurer un serveur Web Les sélecteurs Sélecteur de classe H1.nouveau { color: #FF0000 } <H1 class=''nouveau''>Tout Nouveau ! </H1> .nouveau { color: #FF0000} Sélection de tous les éléments de même classe. Sélecteur ID #intro { letter-spacing: 0.3em } <H1 ID=''z98y''>Introduction</H1> H1#intro { letter-spacing: 0.3em }

Conception & Réalisation Installer et configurer un serveur Web Les sélecteurs (2) Sélecteur contextuel H1 EM { color: red } Affecte uniquement les éléments EM dans un H1 UL LI { font-size: small } UL UL LI { font-size: x-small } Mixage des sélecteurs .reddish H1 { color: red } #x78y CODE {background: blue } DIV.sidenote H1 {font-size: large} H1 B, H2 B, H1 EM, H2 EM { color: red }

Conception & Réalisation Installer et configurer un serveur Web Les classes Définition de classes pour appliquer des styles différents aux même balises Une classe Définie après le nom d'une balise suivie d'un point (''.'') : B.rouge { font: Verdena 12px; color: #FF0000; } Appel d'une classe <B class=''Rouge''> Texte à mettre en rouge et en gras </B> La classe universelle Définie pour être utilisée dans n'importe quelle balise .important { font-type: arial; color: red; font-weight: bold } Appel de la classe <h1 class=''important''> Attention à ce message </h1> <i class=''important''> (il faut en tenir compte) </i>

Conception & Réalisation Installer et configurer un serveur Web Les pseudo-classes Affiner le style appliqué à certain nombre de balises en définissant une réaction à un événement ou bien à la position relative de la balise au sein des autres balises. Ces pseudo-classes sont prédéfinies, contrairement aux classes. Plusieurs types de pseudo-classes Les pseudo-classes dynamiques Les pseudo-classes de lien Les pseudo-classes de langue Les pseudo-classes de page Les pseudo-classes de texte

Conception & Réalisation Installer et configurer un serveur Web Les pseudo-classes dynamiques Modifier le style d'une balise en fonction d'un événement comme un clic souris 3 pseudo-classes : :hover (survol avec souris), :focus (clic dans un formulaire), et :active (entre le début d'un clic souris et le moment où on relâche) Exemple : A:hover {font-decoration: underline; } Les pseudo-classes de lien Modifier le style d'un lien (balise <A>) 2 pseudo-classes : :link – style non-consulté-, :visited – style consulté- Les pseudo-classes de langue 1 pseudo-classes : :lang(Langue) Exemple : HTML : lang (fr) {quotes : ' « ' '  »' }

Conception & Réalisation Installer et configurer un serveur Web La pseudo-classe descendante Appliquer un style à la première balise au sein d'un élément en utilisant le symbole ''>'' et la pseudo-classe :first-child Exemple : p > A:first-child {color: #00FF00; } Les pseudo-classes de page Le sélecteur @page permet de modifier la mise en page d'une page HTML 3 pseudo-classes : :left (les pages de gauche), :right (les pages de droite), et :first (la première page) Exemple : @page:right { size:landscape; margin-left: é.5cm; } Les pseudo-classes de texte Appliquer un style à une partie d'un texte délimité par (<P>) 2 pseudo-classes : :first-line (la première ligne du texte) et :first-letter (la première lettre du texte) Exemple : P:first-letter {font-size: 200%; font-weight: bold; }

Conception & Réalisation Installer et configurer un serveur Web Les unités Relatives em → taille proportionnelle à la taille de la police utilisée ex → taille relative à la minuscule de la police px → pixels, taille relative à l'appareil (écran, projecteur, ...) Absolues in, cm, mm → pouces, centimètres, milimètres pt → point, 1/72 pouce pc → pica, 12points

Conception & Réalisation Installer et configurer un serveur Web Les couleurs – différentes façons pour définir Un nom 17 couleurs Aqua, green, orange, white, black, lime, purple, yellow, blue, maroon, red, fuschia, navy, sliver, gray, olive, teal h1 {color: blue } Un code RGB (ou RVG) en notation hex 16 millions de couleurs avec RGB #RRGGBB : RR, GG, BB = chacun égal à un nombre en hex entre 00 et FF h1 {color: #0000FF } Un code RGB en notation décimal Proportion relative en % ou en notation entière absolue (entre 0 et 255) rgb (100%, 100%, 100%) / rgb (24,125,255)

Conception & Réalisation Installer et configurer un serveur Web Le positionnement Avec les balises SPAN et DIV du HTML Positionnement relatif (par rapport à d'autres éléments) Positionnement absolu (coin supérieur gauche de la fenêtre du navigateur) Exemple 1 : positionnement d'un texte

Conception & Réalisation Installer et configurer un serveur Web Le positionnement (2) Exemple 2 : positionnement d'une image

Conception & Réalisation Installer et configurer un serveur Web Quelques propriétés Pour les polices de caractères font-family: arial; font-size: x-large; font-style: bold Pour les textes et les paragraphes text-align: center; color: red; text-indent: 5px, width: 640, height: 480; Pour les couleurs et l'arrière plan background-color: yellow; background-position: left; Pour les bordures border-left-color: #0000FF; border-top-width: 3pt; Pour les tableaux border-spacing: 4px; caption-side: top; table-layout: fixed; Pour les listes List-style-type: circle; list-style-position: inside;

DOM & SCRIPT (JS) Côté client Conception & Réalisation Installer et configurer un serveur Web DOM & SCRIPT (JS) Côté client

Conception & Réalisation Installer et configurer un serveur Web Document Object Model Description d'un document XML (ou HTML) sous la forme d'un objet composite chaque élément (textes, graphiques, styles) est un sous objet lui même composite Un script (VBScript, JavaScript,...) embarqué dans le document peut manipuler cet objet composite API standard d'accès à un document et son style Le document est vu comme un arbre Chaque objet est un noeud de l'arbre et possède un interface Définition avec l'IDL CORBA 2.2 « Binding » avec Java et ECMAScript (JavaScript, JScript)

Conception & Réalisation Installer et configurer un serveur Web Document Object Model (2) Document représenté sous forme d'arbre → notion de hiérarchie (mère/enfant, précédence, etc ...)

Conception & Réalisation Installer et configurer un serveur Web Document Object Model (3) DOM Level 1 Accès et manipulation de la structure d'un document XML ou HTML http://www.w3.org/TR/REC-DOM-Level-1 (Specification) DOM Level 2 CSS, Range, Filtres et Itérateurs, Evénements utilisateur et de transformation, Namespaces http://www.w3.org/TR/WD-DOM-Level-2 (Core Specification)

Conception & Réalisation Installer et configurer un serveur Web Script côté client But : moins d'intervention du serveur WWW Génération dynamique de documents HTML par le navigateur Contrôle des formulaires HTML par le navigateur Contrôle des ressources du navigateur Scripts embarqué dans un document HTML Mécanisme ouvert <META http-equiv=''Content-Script-Type'' content=''text/tcl''> <SCRIPT> … </SCRIPT> <SCRIPT LANGUAGE=''JavaScript''> … </SCRIPT> <SCRIPT LANGUAGE=''JavaScript'' SRC=''script.js''> … </SCRIPT>

Conception & Réalisation Installer et configurer un serveur Web Script côté client (2) Fonctionnalités Représentation OBJET des éléments du document layer, form, input, img, … manipulation des caractèristiques de ces éléments remarque : précurseur à DOM Programmation événementielle rendre le document « dynamique » Langages JavaScript (NS), Jscript (MS) rien à voir avec le langage Java VBScript (MS) Syntaxe Visual Basic, dialogue avec les contrôles Active X

INTRODUCTION À PHP Conception & Réalisation Installer et configurer un serveur Web INTRODUCTION À PHP

Conception & Réalisation Installer et configurer un serveur Web PHP (Hypertext PreProcessor) PHP connait un succès toujours croissant sur le web et se positionne comme un rival important pour ASP. L'environnement Linux est sa plateforme de prédilection. Combiné avec le serveur Web Apache et la base de données MySql, PHP offre une solution particulièrement robuste, stable et efficace, offrant en outre l'avantage d'être gratuite, tous ces logiciels venant du monde des logiciels libres (Open Source).

Conception & Réalisation Installer et configurer un serveur Web PHP (Hypertext PreProcessor) Présentation du PHP La syntaxe de base Les types Les variables Les constantes (non traité) Les expressions (non traité) Les opérateurs (non traité) Les structures de contrôle (non traité) Les fonctions (non traité)

Conception & Réalisation Installer et configurer un serveur Web PHP - Présentation PHP est un langage de scripts généraliste et Open Source, spécialement conçu pour le développement d'applications web. Langage proche de la syntaxe du langage c Exécuté côté serveur Fichier texte (extension .php) Utilisé pour fournir un comportement dynamique (côté serveur) de page web Le code source PHP n’est pas accessible par un client web.

Conception & Réalisation Installer et configurer un serveur Web Présentation - Que peut faire PHP ? Langage de script côté serveur Langage de programmation en ligne de commande Ecrire des applications clientes graphiques (PHP-GTK : gtk.php.net)

Conception & Réalisation Installer et configurer un serveur Web Présentation (3) Conçu pour faciliter la création de pages web dynamiques Le code PHP est inséré dans le code HTML au moyen d’une pseudo-balise : <? //code php ?> <?PHP //code php ?> <?php //code php ?> D’autres alternatives : ASP, JSP, CGI, Perl, ...

Conception & Réalisation Installer et configurer un serveur Web Présentation – Exemple

Conception & Réalisation Installer et configurer un serveur Web Présentation (5) Vous écrivez une page HTML avec du code inclus à l'intérieur afin de réaliser une action précise (dans ce cas là, afficher du texte). Le client ne reçoit que le résultat du script, sans aucun moyen d'avoir accès au code qui a produit ce résultat.

Conception & Réalisation Installer et configurer un serveur Web La syntaxe de base Passer du HTML au PHP Lorsque PHP traite un fichier, il cherche les balises d'ouvertures et de fermetures, qui délimitent le code qu'il doit interpréter. <p>Ceci sera ignoré.</p> <?php echo 'Alors que ceci sera analysé par PHP.'; ?> <p>Ceci sera également ignoré.</p>

Conception & Réalisation Installer et configurer un serveur Web La syntaxe de base (2) <?php If ($expression) { ?> <strong>Ceci est vrai.</strong> } else

Conception & Réalisation Installer et configurer un serveur Web La syntaxe de base (3) 1. <?php echo 'Si vous voulez réaliser des documentsXHTML ou XML, faites comme ceci'; ?> 2. <script language=''php''> echo 'quelques éditeurs (comme FrontPage) n\'aiment pas ce genre d\'instructions'; </script> 3. <? echo 'ceci est le plus simple, une instruction SGML'; <?=expression ?>Ceci est la version courte pour ''<? echo expression ?>

Conception & Réalisation Installer et configurer un serveur Web La syntaxe de base (4) Le premier exemple est le plus communément utilisé et le plus recommandé. Pour réaliser du code portable, redistribuable, n'utilisez jamais les balises courtes.

Conception & Réalisation Installer et configurer un serveur Web Séparation des instructions (5) Comme en C, PHP requiert que les instructions soient terminées par un point-virgule La balise fermante d'un bloc de code PHP implique automatiquement un point-virgule. Il est recommandé de systématiquement terminer vos intructions par un point-virgule. <? php echo 'ceci est un test'; ?> <? php echo 'ceci est un test' ?>

Conception & Réalisation Installer et configurer un serveur Web Commentaires PHP supporte les commentaires 'C', 'C++' et Unix shell -style <? php echo 'ceci est un test'; //Ceci est un commentaire sur une ligne, style C++ /* Ceci est un commentaire sur plusieurs lignes */ echo 'ceci est un autre test'; echo 'Et un test final'; # Ceci est un commentaire style shell ?>

Conception & Réalisation Installer et configurer un serveur Web Les types

Conception & Réalisation Installer et configurer un serveur Web Les types (2)

Conception & Réalisation Installer et configurer un serveur Web Les types (3)

Conception & Réalisation Installer et configurer un serveur Web Les types (4)

Conception & Réalisation Installer et configurer un serveur Web Les types (5)

Conception & Réalisation Installer et configurer un serveur Web Les types (6)

Conception & Réalisation Installer et configurer un serveur Web Les types (7) Les nombres décimaux Les nombres décimaux (connus aussi sous le vocable de "double", "float" ou "nombre rééls") peuvent être spécifiés en utilisant la syntaxe suivante : <? php $a = 1.234; $b = 1.2e3; $c = 7E-10; ?>

Conception & Réalisation Installer et configurer un serveur Web Les types (8) Les chaines de caractères Les chaînes de caractères sont des séquences de caractères. En PHP, un caractère est un octet et il y en 256 de possibles. Une chaîne peut être spécifiée de trois manières différentes : guillemets simples guillemets doubles Note : La taille n'est pas un problème majeur pour une chaîne. Elle peut devenir très grande sans problème. Il n'y a pas à s'en faire pour cela.

Conception & Réalisation Installer et configurer un serveur Web Les types (9) Les chaines de caractères Guillements simples Le moyen le plus simple de spécifier une chaîne de caractères est d'utiliser les guillemets simples : '. Pour spécifier un guillemet simple littéral, vous devez l'échapper avec un anti-slash (\). Contrairement aux autres syntaxes, les variables présentes dans la chaîne ne seront pas remplacés par leurs valeurs. Si la chaîne est entourée de guillements doubles (''), PHP va comprendre certaines séquences de caractères : \n nouvelle ligne; \r retour à la ligne; \t tabulation horizontale; \\ anti-slash; \$ caractère $; \'' guillements doubles

Conception & Réalisation Installer et configurer un serveur Web Les types (10) Les tableaux Un tableau PHP est en fait une association ordonnée Une association est un type qui fait correspondre des valeurs à des clés <? php $arr = array (''age'' => ''vieux'', 12 => true); echo $arr['''age']; //vieux echo $arr[12]; //1 ?>

Conception & Réalisation Installer et configurer un serveur Web Les types (11) Définition du type PHP ne nécessite pas de déclaration explicite du type de variable Le type d'une variable est déterminé par le contexte d'utilisation Conversion automatique

Conception & Réalisation Installer et configurer un serveur Web Les variables En PHP, les variables sont représentées par un signe dollar ''$'' suivi du nom de la variable Le nom est sensible à la casse. $x != $X Assignation simple $a=10; $b=$a; Assignation par référence $b=&$a;

Conception & Réalisation Installer et configurer un serveur Web Les variables (2) Les variables prédéfinies PHP fourni un grand nombre de variables prédéfinies. Ex: $GLOBALS : contient une référence sur chaque variable qui est en fait disponible dans l'environnement d'exécution global. Les clés de ce tableau sont les noms des variables globales. Voir phpinfo(); pour la liste des variables globales Portée des variables La portée d'une variable dépend du contexte dans lequel la variable est définie Lorsque vous définissez une fonction, la portée d'une variable définie dans cette fonction est locale à la fonction

Conception & Réalisation Installer et configurer un serveur Web Les variables (3) Exemple 1 Fichier test.php Fichier b.inc <?php <?php $a = 1; echo $a; include 'b.inc'; ?> ?> Ici, la variable $a sera accessible dans le script inclus b.inc

Conception & Réalisation Installer et configurer un serveur Web Les variables (4) Exemple 2 <?php $a = 1; /*portée globale*/ function test() { echo $a; /*portée locale*/ } test(); ?> Ici, le script n'affiche rien car l'instruction echo() utilise la variable locale $a et celle-çi n'a pas été initialisée préalablement dans la fonction

Conception & Réalisation Installer et configurer un serveur Web Les variables (5) Le mot clé global <?php $a = 1; /*portée globale*/ $b = 2; /*portée globale*/ function somme() { global $a,$b; $b = $a + $b; } somme(); echo $b; ?> Ici, le script retourne la valeur 3

Conception & Réalisation Installer et configurer un serveur Web Les variables (6) Les variables static Une variable statique à une portée locale uniquement, mais elle ne perd pas sa valeur lorsque le script appelle la fonction <?php function Compteur() { $a=0; echo $a; $a++; } ?> cette fonction est inutile car à chaque fois qu'elle est appelée, elle initialise $a à 0 et affiche ''0''

Conception & Réalisation Installer et configurer un serveur Web Les variables (7) Les variables static (2) <?php function Compteur() { static $a = 0; echo $a; $a++; } ?> Maintenant à chaque fois que la fonction Compteur() est appelée, elle affichera une valeur de $a incrémentée de 1

Conception & Réalisation Installer et configurer un serveur Web Les variables (8) Les variables dynamiques Il est pratique d'avoir parfois des noms de variables qui sont variables. C'est-à-dire un nom de variable qui est affecté et utilisé dynamiquement. Une variable dynamique prend la valeur d'une variable et l'utilise comme nom d'une autre variable <?php $a = 'bonjour'; $$a = 'le monde'; ?> <?php echo ''$a ${$a}''; ?> Affichera : bonjour le monde

GESTIONS DES FORMULAIRES Conception & Réalisation Installer et configurer un serveur Web GESTIONS DES FORMULAIRES

Conception & Réalisation Installer et configurer un serveur Web Les formulaires Pour interaction avec l'utilisateur Programme sur le serveur (ou script JavaScript) → retourne une page de résultats Script CGI → programme sur le serveur qui traite des données Formulaires → forum, contact, QCM, moteur de recherche, etc ...

Conception & Réalisation Installer et configurer un serveur Web La balise <form> Balise <form> qui peut contenir du texte et/ou les champs action lien vers l'URI du CGI qui traite du formulaire method manière de transmettre l'information get → le contenu des formulaires est ajouté à l'URI spécifié dans action (chercher.cgi?nom=Durand) post → le contenu est posté dans le corps de la requête HTTP

Conception & Réalisation Installer et configurer un serveur Web Les champs (contrôles) A inclure dans <form> Pratiquement tous <input /> type=''text'' type=''password'' type=''file'' name='''' → nom unique qui sera transmis value='''' → valeur par défaut size='''' → largeur du champ maxlength='''' → longueur maximale de l'input

Conception & Réalisation Installer et configurer un serveur Web Les cases à cocher et boutons radio <input name=''xx'' type=''checkbox'' value=''yy'' /> checked=''checked'' optionnel plusieurs contrôles avec même nom possible mais avec la même valeur n'est envoyé au CGI qui si sélectionne <input name=''xx'' type=''radio'' value=''yy'' /> plusieurs valeurs nécessaires avec même nom checked=''checked'' optionnel mais recommandé (1er de la série par défaut)

Conception & Réalisation Installer et configurer un serveur Web Les boutons Envoi du formulaire <input type=''submit'' value=''Envoyer''> name optionnel, envoye le contenu de value Effacement <input type=''reset'' value=''Effacer ...''> Image équivalent à submit <input type=''image'' src='''' alt=''''> Autres boutons <input type=''button'' value=''Effacer ...'' onclick='''' /> nécessaire de définir une action javascript

Conception & Réalisation Installer et configurer un serveur Web Soumettre des valeurs cachées Valeurs à transmettre que l'utilisateur n'a pas besoin/droit de modifier <input type=''hidden'' name=''xx'' value=''yyy''>

Conception & Réalisation Installer et configurer un serveur Web Les sélecteurs de liste Pour sélectionner valeur (=ComboBox) <select> name='''' size='''' nombre d'éléments visibles en même temps multiple=''multiple'' sélection multiple possible <option> inclut les options possibles value='''' valeur à transmettre (si absent, envoie la valeur incluse dans option <selection> selected=''selected'' → valeur par défaut Exemple :

Conception & Réalisation Installer et configurer un serveur Web Les champs textes multilignes Textes longs, multilignes <textarea> name='''' nom du champ rows et cols nombre de caractères pour dimension du champ A l'intérieur du tag: texte à afficher par défaut <textarea name=''Comment''> Ce texte est affiché dans le formulaire<textarea>

Conception & Réalisation Installer et configurer un serveur Web Exemples de formumaires

Conception & Réalisation Installer et configurer un serveur Web Exemples de formumaires (2)

LES BASES DE DONNEES ET LE WEB Conception & Réalisation Installer et configurer un serveur Web LES BASES DE DONNEES ET LE WEB

Conception & Réalisation Installer et configurer un serveur Web Site Internet dynamique – Principe de fonctionnement  Traitement des données par le serveur Ex: Interrogation d’une base de données MySQL  Renvoi du résultat sous forme de document HTML Ex: Affichage HTML sous forme de tableau <table>  Envoi d’une requête depuis une page web Ex: variables dans un formulaire

Conception & Réalisation Installer et configurer un serveur Web Qu'est-ce qu'une page dynamique Le principe d'une page dynamique est d'être construite à la demande (à la volée) par le serveur (côté serveur), en fonction de critères spécifiques. La présentation et le contenu affichés peuvent ainsi être personnalisés de manière interactive, en fonction des produits, des internautes, des langues, etc.

Conception & Réalisation Installer et configurer un serveur Web Qu'est-ce qu'une page dynamique (2) On reconnaît facilement un page dynamique grâce à l'URL qui s'affiche dans le navigateur web de l'utilisateur : • page statique: http://www.monsite.be/accueil.htm: affiche la page accueil.htm, stockée telle quelle sur le serveur, • page dynamique: http://www.monsite.be/accueil.php?langue=fr: affiche la page accueil.php en demandant au serveur d'afficher le contenu de cette page en français. Alors que les pages statiques font appel au html, langage de description de données, les pages dynamiques sont mises en oeuvre grâce à un langage de programmation. Grâce à lui, on pourra disposer d'instructions conditionnelles, de boucles et de fonctions de traitement complexes. Le langage de programmation variera en fonction de la technologie retenue (PHP, ASP, Java, etc.).

Conception & Réalisation Installer et configurer un serveur Web Page dynamique et bases de données L'accès aux bases de données est l'une des fonctions essentielles des pages dynamiques. Comment publier une base de données sur le web? Quels sont les différents types d'accès? Quels sont les grands standards? Pour des applications web et e-business, les bases de données sont très rapidement devenues indispensables.

Conception & Réalisation Installer et configurer un serveur Web Comment publier une base de données sur le web 3 composants sont nécessaires pour publier une base de données : La base de données, Un serveur Web, Un middleware ou serveur d'application (qui gère les pages dynamiques). Le schéma classique de publication des informations de la base de données vers le web est le suivant :

Conception & Réalisation Installer et configurer un serveur Web Comment publier une base de données sur le web (2) Pour pouvoir parler à une base de données, le logiciel d'application devra utiliser un API. Parmi les cas les plus fréquents, citons : API natif de la base de données : mis à disposition par les constructeurs qui présentent l'avantage d'être optimisés pour accéder à la base de données, ODBC (Open DataBase Connectivity) : standard développé par Microsoft qui permet d'interfacer une application avec n'importe quel serveur de base de données, pour autant que celui-ci possède un pilote (driver) ODBC, ce qui est le cas pour tous les SGBD standards du marché, JDBC (Java DataBase Connectivity) : API Java qui a été développée pour permettre à un programme de se connecter à n'importe quel SGBD en utilisant la même syntaxe. JDBC est donc indépendante du SGBD et de la plateforme sur laquelle elle s'exécute. JDBC fait appel à ODBC ou à des API propriétaires spécifique à chaque SGDB.

Conception & Réalisation Installer et configurer un serveur Web Les différents types d'accès Les opérations réalisées sur les données mises en ligne pourront être : La lecture, La création / suppression, La mise à jour. Suivant la nature de l'application, la solution technique retenue ou encore le lieu d'hébergement du site, ces opérations s'effectueront suivant deux scénarios : Accès à des bases de données intermédiaires, créées et gérées spécifiquement pour le site web. Les opérations effectuées sur ces bases intermédiaires sont ensuite répercutées sur les bases de données internes de l'entreprise suivant une périodicité et un protocole bien précis, en temps différé, Accès direct en temps réel aux bases de données de l'entreprise. Celles-ci servent alors à la fois pour la gestion interne de l'entreprise et pour la publication des données sur Internet.

TP & Mise en pratique TP & Mise en pratique Installer et configurer un serveur Web TP & Mise en pratique

TP & Mise en pratique Installer et configurer un serveur Web Editeurs HTML

TP & Mise en pratique Installer et configurer un serveur Web Editeurs HTML (2)

TP & Mise en pratique Installer et configurer un serveur Web Mise en place de la structure du site Un site Web doit se préparer avec un simple papier et un crayon. La trame du site doit être pensée avant de s'attaquer à la mise en page logiciel même. Ainsi il sera plus simple de retranscrir facilement et rapidement votre site en y ajoutant le contenu.

TP & Mise en pratique Installer et configurer un serveur Web Mise en place de la structure du site (2) Exemple de design pour les pages

TP & Mise en pratique Installer et configurer un serveur Web Réalisation du site Web Réalisez sous Windows votre curriculum vitae en langage HTML. Celui-ci devra être composé de plusieurs documents reliés par des liens. Il sera installé dans le répertoire « www\moncv » de WampServer et les images dans le répertoires « www\moncv\images » 1 page d'accueil de présentation avec les liens sur les autres pages, 1 page pour la formation initiale, 1 page pour les expériences professionnelles, 1 page pour les loisirs, passions Chaque page doit vous permettre de revenir à la page d'accueil.

Questions & Réponses Questions & Réponses Installer et configurer un serveur Web Questions & Réponses

REFERENCES Installer et configurer un serveur Web Références

REFERENCE PHP Installer et configurer un serveur Web Langage PHP Site officiel: http://www.php.net Ouvrage de référence: Leon Atkinson, ‘Core PHP Programming’, Prentice Hall PTR

REFERENCE MySQL Installer et configurer un serveur Web Bases de données MySQL Site officiel: http://www.mysql.com Ouvrage de référence: Paul DuBois, ‘MySQL’, CampusPress (collection ‘Référence’)

REFERENCES DIVERS Installer et configurer un serveur Web http://www.loria.fr/~clauss/cours_php.pdf http://www.w3.org/Style/Examples/011/firstcss.fr.html http://www.w3.org/TR/REC-html40/ http://dev.mysql.com/doc/refman/5.0/fr/index.html http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html http://g-rossolini.developpez.com/tutoriels/php/cours/ http://sylvie-vauthier.developpez.com/tutoriels/php/grand-debutant/