La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Technologie WebSaïd TOUIL - CNFPT 1 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web PLAN DE FORMATION Introduction Les enjeux.

Présentations similaires


Présentation au sujet: "Technologie WebSaïd TOUIL - CNFPT 1 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web PLAN DE FORMATION Introduction Les enjeux."— Transcription de la présentation:

1 Technologie WebSaïd TOUIL - CNFPT 1 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web PLAN DE FORMATION Introduction 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

2 Technologie WebSaïd TOUIL - CNFPT 2 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web PLAN DE FORMATION 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

3 Technologie WebSaïd TOUIL - CNFPT 3 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web PLAN DE FORMATION Fonctionnement site Web / Navigateur Principe de fonctionnement d'un navigateur Comment le site Web interagit avec le navigateur Fonctionnement d'un site Internet/Intranet

4 Technologie WebSaïd TOUIL - CNFPT 4 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web PLAN DE FORMATION 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

5 Technologie WebSaïd TOUIL - CNFPT 5 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web PLAN DE FORMATION 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

6 Technologie WebSaïd TOUIL - CNFPT 6 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES ENJEUX LES ENJEUX DU WEB

7 Technologie WebSaïd TOUIL - CNFPT 7 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES ENJEUX 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

8 Technologie WebSaïd TOUIL - CNFPT 8 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES ENJEUX 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 LES ENJEUX ECONOMIQUES & FINANCIERS 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

9 Technologie WebSaïd TOUIL - CNFPT 9 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES ENJEUX 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 LES ENJEUX ECONOMIQUES & FINANCIERS (2) 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

10 Technologie WebSaïd TOUIL - CNFPT 10 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES ENJEUX 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 ENJEUX TECHNOLOGIQUES 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 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

11 Technologie WebSaïd TOUIL - CNFPT 11 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web RÔLE D'UN SERVEUR WEB LE RÔLE DU SERVEUR WEB

12 Technologie WebSaïd TOUIL - CNFPT 12 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web RÔLE D'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.

13 Technologie WebSaïd TOUIL - CNFPT 13 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web RÔLE D'UN SERVEUR WEB 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. Un serveur Web peut être (2) :

14 Technologie WebSaïd TOUIL - CNFPT 14 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web RÔLE D'UN SERVEUR WEB 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. Un serveur Web peut être (3) :

15 Technologie WebSaïd TOUIL - CNFPT 15 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web RÔLE D'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.

16 Technologie WebSaïd TOUIL - CNFPT 16 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web RÔLE D'UN SERVEUR WEB Différents types de serveur : Apache (le plus répandu sur Unix/Linux/Windows). Microsoft Information Server (IIS sur Windows Server). Jigsaw (Java, portable). Netscape Server (Unix, Windows Server). MacHTTP (Mac). : pour une comparaison complète de tous les serveurs disponibles.

17 Technologie WebSaïd TOUIL - CNFPT 17 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web RÔLE D'UN SERVEUR WEB Un exemple : le serveur APACHE Gratuit (license GNU) Modulaire Efficace Simple Robuste (c'est le plus utilisé)

18 Technologie WebSaïd TOUIL - CNFPT 18 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web RÔLE D'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

19 Technologie WebSaïd TOUIL - CNFPT 19 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web RÔLE D'UN SERVEUR WEB 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 (ici APACHE) (2) :

20 Technologie WebSaïd TOUIL - CNFPT 20 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web RÔLE D'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 pid error_log access_log Trois fichiers de logs (par défaut)

21 Technologie WebSaïd TOUIL - CNFPT 21 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web RÔLE D'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) Interprétation de formulaires (mod_cgi) Exécuter un script et renvoyer le résultat comme une page Exécuter un script et renvoyer le résultat tel quel Scripts dit nph (Non Parsed Hearder)

22 Technologie WebSaïd TOUIL - CNFPT 22 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web RÔLE D'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)

23 Technologie WebSaïd TOUIL - CNFPT 23 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web RÔLE D'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 )http://www.apache.org/docs/mod_access.html Voir le mod_auth de Apache (http://www.apache.org/docs/mod_auth.html)http://www.apache.org/docs/mod_auth.html Vérifier le mot de passe et un login

24 Technologie WebSaïd TOUIL - CNFPT 24 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web RÔLE D'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)http://www.apache.org/docs/mod_include.html

25 Technologie WebSaïd TOUIL - CNFPT 25 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web RÔLE D'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 : qui réagit selon le language souhaité Voir les modes de Apache suivant :

26 Technologie WebSaïd TOUIL - CNFPT 26 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web RÔLE D'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)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)http://www.apache-ssl.org

27 Technologie WebSaïd TOUIL - CNFPT 27 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web RÔLE D'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 (interfaces virtuelles) Une même machine peut porter plusieurs noms, même si elle n'a Les serveurs Web savent gérer ces cas de figure : une seule machine avec une seule carte réseau et une peut héberger plusieurs serveurs WWW virtuels Par exemple : répondre à et en renvoyant des pages différentes et en maintenant des logs et des configs propres à chaque serveur Virtuel (voir le mode vhosts de Apache)http://www.monsite.fr

28 Technologie WebSaïd TOUIL - CNFPT 28 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LE MODELE CLIENT/SERVEUR ARCHITECTURE CLIENT / SERVEUR

29 Technologie WebSaïd TOUIL - CNFPT 29 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LE MODELE CLIENT/SERVEUR 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.

30 Technologie WebSaïd TOUIL - CNFPT 30 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LE MODELE CLIENT/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 ; Caractéristiques d'un serveur : 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 ;

31 Technologie WebSaïd TOUIL - CNFPT 31 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LE MODELE CLIENT/SERVEUR 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

32 Technologie WebSaïd TOUIL - CNFPT 32 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LE MODELE CLIENT/SERVEUR 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 ». Architectures trois tiers et multi-tiers : 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).

33 Technologie WebSaïd TOUIL - CNFPT 33 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LE MODELE CLIENT/SERVEUR Avantages Comparaison avec les architectures distribuées: 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.

34 Technologie WebSaïd TOUIL - CNFPT 34 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LE MODELE CLIENT/SERVEUR Inconvénients Comparaison avec les architectures distribuées: 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.

35 Technologie WebSaïd TOUIL - CNFPT 35 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LE MODELE CLIENT/SERVEUR 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.

36 Technologie WebSaïd TOUIL - CNFPT 36 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES WEB SERVICES WEB

37 Technologie WebSaïd TOUIL - CNFPT 37 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES WEB Définition : 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.

38 Technologie WebSaïd TOUIL - CNFPT 38 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES 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.

39 Technologie WebSaïd TOUIL - CNFPT 39 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES WEB Un Service Web, cest quoi ? Un service Web est une « unité logique applicative » accessible en utilisant les protocoles standard dInternet Une « librairie » fournissant des données et des services à dautres 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.

40 Technologie WebSaïd TOUIL - CNFPT 40 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES WEB Un Service Web, cest quoi ? (2) Caractéristiques : Réutilisable Indépendamment de la plate-forme (UNIX, Windows, …) limplémentation (VB, C#, Java, …) larchitecture sous-jacente (.NET, J2EE,...)

41 Technologie WebSaïd TOUIL - CNFPT 41 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES WEB Evolution du Web

42 Technologie WebSaïd TOUIL - CNFPT 42 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES WEB Le Web 3ème génération Demain : Un site Web est un composant fournissant des services en XML - structure / sémantique - fusion possible Aujourdhui : Un site Web fournie des pages HTML - pas de structure - impossible à fusionner avec dautres pages

43 Technologie WebSaïd TOUIL - CNFPT 43 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES WEB Le Web 3ème génération (2) Exemple 1 Exemple 2

44 Technologie WebSaïd TOUIL - CNFPT 44 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES WEB Pourquoi faire Les services Web permettent dinterconnecter : 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

45 Technologie WebSaïd TOUIL - CNFPT 45 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES WEB Modèle client / serveur Service Web XML Service Web XML Client XML XML

46 Technologie WebSaïd TOUIL - CNFPT 46 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES 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).

47 Technologie WebSaïd TOUIL - CNFPT 47 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES 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, …

48 Technologie WebSaïd TOUIL - CNFPT 48 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES WEB Architecture – Cycle de vie d'utilisation Annuaire UDDI 2 : Jai trouvé ! Voici le serveur hébergeant ce service web 3 : Quel est le format dappel du service que tu proposes? Client Contra t SOAP Serveur XML 4 : Voici mon contrat (WSDL) 1 : Je recherche un service WEB XML 5 : Jai compris comment invoquer ton service et je tenvoie un document XML représentant ma requête XML 6 : Jai exécuté ta requête et je te retourne le résultat

49 Technologie WebSaïd TOUIL - CNFPT 49 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES 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

50 Technologie WebSaïd TOUIL - CNFPT 50 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES WEB 1: Déploiment du WS

51 Technologie WebSaïd TOUIL - CNFPT 51 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES WEB 2: Enregistriment du WS

52 Technologie WebSaïd TOUIL - CNFPT 52 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES WEB 3: Découverte du WS

53 Technologie WebSaïd TOUIL - CNFPT 53 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES WEB 4: Invocation du WS

54 Technologie WebSaïd TOUIL - CNFPT 54 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES WEB Architecture globale

55 Technologie WebSaïd TOUIL - CNFPT 55 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES 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.

56 Technologie WebSaïd TOUIL - CNFPT 56 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES 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.

57 Technologie WebSaïd TOUIL - CNFPT 57 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LES SERVICES WEB Lexique 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

58 Technologie WebSaïd TOUIL - CNFPT 58 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web PROTOCOLES & ADRESSES Protocoles 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 () / Jai pas entendu () / Je répête : « Oui » () Définition 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

59 Technologie WebSaïd TOUIL - CNFPT 59 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web PROTOCOLES & ADRESSES Protocoles de communication compréhension entre machines / logiciels But Protocole pour l'échange de messages un langage et un ensemble de règles communications indépendantes du système d'exploitation ou de la plate-forme limitation des erreurs/risques durant la transmission 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

60 Technologie WebSaïd TOUIL - CNFPT 60 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web PROTOCOLES & ADRESSES Modèle en couches Personne Employeur Lettre de motivation Enveloppe Centre de tri Centre de distribution Route (camion) acheminer récupérer poster cacheter écrire délivrer ouvrir lire Candidature spontanée Format de ce type de lettre Envoi/réception courrier Codification interne de la poste

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

62 Technologie WebSaïd TOUIL - CNFPT 62 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web PROTOCOLES & ADRESSES Protocoles de l'Internet IP (Internet Protocol) Niveau OSI réseau Niveau OSI transport / session TCP (Transmission Control Protocol) Adressage (routage) des informations Identification des machines 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 TCP/IP base de l'internet DNS (Domain Name Server protocol) / Conversion du nom des ordinateurs connectés au réseau en adresses IP

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

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

65 Technologie WebSaïd TOUIL - CNFPT 65 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web PROTOCOLES & ADRESSES 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 lisiperso15.univ-paris13.fr DNS dns.univ-paris13.fr … et transmet la question à un autre DNS s'il ne sait pas répondre ? DNS dns.univ-lyon1.fr

66 Technologie WebSaïd TOUIL - CNFPT 66 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LA NORME CGI

67 Technologie WebSaïd TOUIL - CNFPT 67 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LA NORME CGI 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

68 Technologie WebSaïd TOUIL - CNFPT 68 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LA NORME CGI 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.

69 Technologie WebSaïd TOUIL - CNFPT 69 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LA NORME CGI 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.

70 Technologie WebSaïd TOUIL - CNFPT 70 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LA NORME CGI 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.

71 Technologie WebSaïd TOUIL - CNFPT 71 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LA NORME CGI 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.

72 Technologie WebSaïd TOUIL - CNFPT 72 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LA NORME CGI 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 : Dans le cas d'un fichier GIF, la chaîne suivante : Content-type : text/html Content-type : image/gif

73 Technologie WebSaïd TOUIL - CNFPT 73 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LA NORME CGI 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. Le fichier demandé, L'adresse IP du demandeur, 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 navigateur effectuant le requête...

74 Technologie WebSaïd TOUIL - CNFPT 74 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LA NORME CGI 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.

75 Technologie WebSaïd TOUIL - CNFPT 75 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LA NORME CGI 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.

76 Technologie WebSaïd TOUIL - CNFPT 76 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LA NORME CGI 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é :

77 Technologie WebSaïd TOUIL - CNFPT 77 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LA NORME CGI 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.

78 Technologie WebSaïd TOUIL - CNFPT 78 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LA NORME CGI 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. Content-type : text/html\n\n La première chaîne envoyée au navigateur est donc la suivante : 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).

79 Technologie WebSaïd TOUIL - CNFPT 79 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web LA NORME CGI 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 '' ''; print '' Hello World ''; print '' ''; print ''Hello World !''; print '' ''; Exemple de script CGI pour une redirection d'URL #! /usr/local/bin/perl print ''location :http://www.commentcamarche.net'';

80 Technologie WebSaïd TOUIL - CNFPT 80 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Installation & Configuration d'un Site Web

81 Technologie WebSaïd TOUIL - CNFPT 81 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Installation de WampServer2 sous Windows

82 Technologie WebSaïd TOUIL - CNFPT 82 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Introduction à WAMP Wamp Server 2 est la nouvelle version de WAMP5. Wamp Server 2.0i est composé de Apache , MySQL , PHP 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. N ous allons voir comment installer Wamp server 2.0i en français. Lien pour téléchager Wamp server.

83 Technologie WebSaïd TOUIL - CNFPT 83 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site 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" :

84 Technologie WebSaïd TOUIL - CNFPT 84 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Installer WampServer 2.0 (2)

85 Technologie WebSaïd TOUIL - CNFPT 85 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Installer WampServer 2.0 (3) Cliquez sur "Next" pour débuter réellement l'installation de Wamp server 2 :

86 Technologie WebSaïd TOUIL - CNFPT 86 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Installer WampServer 2.0 (4) Lisez puis validez la licence du logiciel, en sélectionnant "I accept the agreement", puis cliquez sur "Next" :

87 Technologie WebSaïd TOUIL - CNFPT 87 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site 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" :

88 Technologie WebSaïd TOUIL - CNFPT 88 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site 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" :

89 Technologie WebSaïd TOUIL - CNFPT 89 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Installer WampServer 2.0 (7) Enfin, cliquez sur "Install" :

90 Technologie WebSaïd TOUIL - CNFPT 90 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site 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.

91 Technologie WebSaïd TOUIL - CNFPT 91 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site 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.

92 Technologie WebSaïd TOUIL - CNFPT 92 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site 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 , c'est l'adresse de l'expéditeur qui apparaitra dans les s envoyés, lorsque celle-ci n'est pas spécifiée dans vos scripts.

93 Technologie WebSaïd TOUIL - CNFPT 93 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site 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.

94 Technologie WebSaïd TOUIL - CNFPT 94 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site 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.

95 Technologie WebSaïd TOUIL - CNFPT 95 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site 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" :

96 Technologie WebSaïd TOUIL - CNFPT 96 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site 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 :

97 Technologie WebSaïd TOUIL - CNFPT 97 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site 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 :http://localhost

98 Technologie WebSaïd TOUIL - CNFPT 98 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site 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.

99 Technologie WebSaïd TOUIL - CNFPT 99 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Présentations des fichiers de configurations

100 Technologie WebSaïd TOUIL - CNFPT 100 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Serveur Apache httpd.conf Apache error log Apache access log

101 Technologie WebSaïd TOUIL - CNFPT 101 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Serveur Apache - httpd.conf Ce fichier se trouve dans le répertoire suivant

102 Technologie WebSaïd TOUIL - CNFPT 102 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Serveur Apache – httpd.conf (2) 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. Ce fichier contient les directives propres au fonctionnement du serveur lui-même.

103 Technologie WebSaïd TOUIL - CNFPT 103 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Serveur Apache - access.log Ce fichier se trouve dans le répertoire suivant

104 Technologie WebSaïd TOUIL - CNFPT 104 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site 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 : [30/May/1998:17:27: ] "GET /page1.shtml HTTP/1.0" 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.

105 Technologie WebSaïd TOUIL - CNFPT 105 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Serveur Apache - error.log Ce fichier se trouve dans le répertoire suivant

106 Technologie WebSaïd TOUIL - CNFPT 106 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site 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 ;

107 Technologie WebSaïd TOUIL - CNFPT 107 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Pour php php.ini PHP error log

108 Technologie WebSaïd TOUIL - CNFPT 108 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Pour php – fichier de configuration php.ini Ce fichier se trouve dans le répertoire suivant

109 Technologie WebSaïd TOUIL - CNFPT 109 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Pour php – fichier de configuration php.ini (2) Le fichier php.ini contient les paramètres de PHP. Il permet dintervenir, 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"

110 Technologie WebSaïd TOUIL - CNFPT 110 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site 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).

111 Technologie WebSaïd TOUIL - CNFPT 111 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site 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

112 Technologie WebSaïd TOUIL - CNFPT 112 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Configuration d'un site Web minima

113 Technologie WebSaïd TOUIL - CNFPT 113 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Configuration d'un site Web DEMO

114 Technologie WebSaïd TOUIL - CNFPT 114 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Lancement du site dans le navigateur

115 Technologie WebSaïd TOUIL - CNFPT 115 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un Site Web Lancement du site dans le navigateur

116 Technologie WebSaïd TOUIL - CNFPT 116 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un serveur FTP Installation et configuration d'un serveur FTP

117 Technologie WebSaïd TOUIL - CNFPT 117 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un serveur FTP 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à :

118 Technologie WebSaïd TOUIL - CNFPT 118 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un serveur FTP Installation du serveur FTP Téléchargement de la version sur le site

119 Technologie WebSaïd TOUIL - CNFPT 119 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un serveur FTP 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.

120 Technologie WebSaïd TOUIL - CNFPT 120 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un serveur FTP 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).

121 Technologie WebSaïd TOUIL - CNFPT 121 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un serveur FTP Installation du serveur FTP (3) L'écran suivant vous demande le répertoire de destination (Dossier d'installation) de l'application.

122 Technologie WebSaïd TOUIL - CNFPT 122 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un serveur FTP 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.

123 Technologie WebSaïd TOUIL - CNFPT 123 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un serveur FTP 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 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).

124 Technologie WebSaïd TOUIL - CNFPT 124 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un serveur FTP 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.

125 Technologie WebSaïd TOUIL - CNFPT 125 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un serveur FTP 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.

126 Technologie WebSaïd TOUIL - CNFPT 126 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un serveur FTP 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.

127 Technologie WebSaïd TOUIL - CNFPT 127 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un serveur FTP 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

128 Technologie WebSaïd TOUIL - CNFPT 128 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un serveur FTP 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.

129 Technologie WebSaïd TOUIL - CNFPT 129 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un serveur FTP 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

130 Technologie WebSaïd TOUIL - CNFPT 130 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Install & Config d'un serveur FTP Accès au serveur FTP – Navigateur Web

131 Technologie WebSaïd TOUIL - CNFPT 131 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Fonctionnement Site Web / Navigateur LE NAVIGATEUR WEB Principe de fonctionnement

132 Technologie WebSaïd TOUIL - CNFPT 132 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Fonctionnement Site Web / Navigateur 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

133 Technologie WebSaïd TOUIL - CNFPT 133 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Fonctionnement Site Web / Navigateur 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.

134 Technologie WebSaïd TOUIL - CNFPT 134 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Fonctionnement Site Web / Navigateur 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.

135 Technologie WebSaïd TOUIL - CNFPT 135 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Fonctionnement Site Web / Navigateur 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.

136 Technologie WebSaïd TOUIL - CNFPT 136 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Intéraction avec le Navigateur Comment le site Web interagit avec le Navigateur

137 Technologie WebSaïd TOUIL - CNFPT 137 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Intéraction avec le Navigateur Le protocole HTTP Le protocole HTTP est le protocole le plus utilisé sur Internet depuis 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).

138 Technologie WebSaïd TOUIL - CNFPT 138 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Intéraction avec le Navigateur (2) 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

139 Technologie WebSaïd TOUIL - CNFPT 139 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Intéraction avec le Navigateur (3) 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.

140 Technologie WebSaïd TOUIL - CNFPT 140 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Intéraction avec le Navigateur (4) 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 ( signifie retour chariot ou saut de ligne) : METHODE URL VERSION EN-TÊTE : Valeur. EN-TÊTE : Valeur Ligne vide CORPS DE LA REQUÊTE Exemple : GET HTTP/1.0http://www.commentcamarche.net Accept : text/html User-Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows XP)

141 Technologie WebSaïd TOUIL - CNFPT 141 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Intéraction avec le Navigateur (5) 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.

142 Technologie WebSaïd TOUIL - CNFPT 142 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Intéraction avec le Navigateur (6) 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 EN-TÊTE : Valeur. EN-TÊTE : Valeur Ligne vide CORPS DE LA REPONSE Exemple : HTTP/ OK Date : Sat, 21 Aout :38:12 GMT Server : Microsoft-IIS/2.0 Content-Type : text/html Content-Length : 1245 Last-Modified : Fri, 20 Aout :23:12 GMT

143 Technologie WebSaïd TOUIL - CNFPT 143 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet Fonctionnement d'un site Internet / Intranet

144 Technologie WebSaïd TOUIL - CNFPT 144 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet 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.

145 Technologie WebSaïd TOUIL - CNFPT 145 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (1) Accès au serveur depuis Internet Nous voulons accéder au site 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.www.bidule.com Le serveur DNS du F.A.I indique à notre machine que possède l'adresse IP 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.www.bidule.com

146 Technologie WebSaïd TOUIL - CNFPT 146 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (2) Accès au serveur depuis Internet (2) De proche en proche, la demande va transiter jusqu'à atteindre le serveur. Le serveur 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).

147 Technologie WebSaïd TOUIL - CNFPT 147 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (3) 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.

148 Technologie WebSaïd TOUIL - CNFPT 148 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (4) 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).

149 Technologie WebSaïd TOUIL - CNFPT 149 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (5) Fonctionnement Serveur de messagerie (2)

150 Technologie WebSaïd TOUIL - CNFPT 150 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (6) 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.

151 Technologie WebSaïd TOUIL - CNFPT 151 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (7) 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).

152 Technologie WebSaïd TOUIL - CNFPT 152 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (8) Connecter son entreprise – Accès vers l'extérieur : Routeur Routeur noyau Routeur externe Routeur interne Réseau autonome

153 Technologie WebSaïd TOUIL - CNFPT 153 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (9) 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.

154 Technologie WebSaïd TOUIL - CNFPT 154 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (10) Connecter son entreprise – Contrôler les accès depuis ou vers l'extérieur : pare-feu windows

155 Technologie WebSaïd TOUIL - CNFPT 155 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (11) Connecter son entreprise – Contrôler les accès depuis ou vers l'extérieur : pare-feu windows

156 Technologie WebSaïd TOUIL - CNFPT 156 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (12) Fonctionnement d'un Intranet - Présentation 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. 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 :

157 Technologie WebSaïd TOUIL - CNFPT 157 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (13) Intranet – site externe protégé (avec mot de passe) On pourra ensuite se déconnecter

158 Technologie WebSaïd TOUIL - CNFPT 158 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (14) Intranet – site interne protégé (sans mot de passe)

159 Technologie WebSaïd TOUIL - CNFPT 159 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (15) Intranet - Accès Nom d'utilisateur (login) Mot de passe 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.

160 Technologie WebSaïd TOUIL - CNFPT 160 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (16) Intranet – Les services Mise à disposition d'informations sur l'entreprise (panneau d'affichage) Un Intranet peut rendre les services suivants : 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. 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 L'information disponible sur l'intranet doit être mise à jour en évitant les conflits de version.

161 Technologie WebSaïd TOUIL - CNFPT 161 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (17) Fonctionnement d'un Extranet – Accès depuis l'extérieur Authentification simple (nom d'utilisateur et mot de passe) 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 forte (authentification à l'aide d'un script)

162 Technologie WebSaïd TOUIL - CNFPT 162 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Site Internet / Intranet (18) 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.

163 Technologie WebSaïd TOUIL - CNFPT 163 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Conception & Réalisation de pages Web

164 Technologie WebSaïd TOUIL - CNFPT 164 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Notion d'hypertexte & d'hypermédia

165 Technologie WebSaïd TOUIL - CNFPT 165 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Hyperlien = Références entre documents Navigation d'un document à un l'autre

166 Technologie WebSaïd TOUIL - CNFPT 166 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Hypertexte enrichi du Multimédia Images, Sons, Vidéos, Animations contenant des zones sensibles (boutons,...)

167 Technologie WebSaïd TOUIL - CNFPT 167 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation LE LANGAGE HTML

168 Technologie WebSaïd TOUIL - CNFPT 168 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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)

169 Technologie WebSaïd TOUIL - CNFPT 169 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Langage de Description de Documents HyperTextuels Edition manuelle possible Génération de documents par programmation (CGI,Perl) Structuration hiérarchique à la SGML Description textuelle du Document Apparation d'outils WYSIWYG (FrontPage, DreamWeaver,...) Elément HTML décrit par balisage (tag) du texte … Il existe une DTD (Définition de Type de Document) publique HTML

170 Technologie WebSaïd TOUIL - CNFPT 170 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Fonctionne sous la base de la balise (ou tag) Ex:,, Ceci est un paragraphe. Une balise formate le document en entier ou une partie du texte Principe du HTML A chaque balise correspond une balise fermante, ce qui limite l'effet de balise Les retours de chariot ou les espaces blancs ne sont pas pris en compte

171 Technologie WebSaïd TOUIL - CNFPT 171 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Un document HTML peut être édité Dans un simple éditeur de texte A l'aide d'éditeurs plus ou moins sophistiqués (grand choix Principe du HTML (2) Nombreux éditeurs shareware ou freeware sont disponibles Généré par un traitemente de texte (« Sauver sous... », mais le code n'est pas très bon) Exemples d'éditeurs : - Adobe Dreamweaver : - Microsoft expression (Frontpage) :

172 Technologie WebSaïd TOUIL - CNFPT 172 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Premier exemple de document HTML

173 Technologie WebSaïd TOUIL - CNFPT 173 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Le document à l'extension.html ou htm C'est cette page qui est affichée par défaut si rien n'est spécifié Fichier HTML Simple texte facile à modifier Exemples dans notre site minima : La page principale dans un répertoire se nomme index.htm(l), (parfois aussi welcome.htm(l) ou default.htm(l)) Equivalent de :

174 Technologie WebSaïd TOUIL - CNFPT 174 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Structure générale d'un document HTML

175 Technologie WebSaïd TOUIL - CNFPT 175 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les balises sont emboîtées Ceci est un paragraphe avec un mot en gras. Les balises Balise non sensibles à la casse : =, toléré marque début et fin d'un document Une balise peut avoir des attributs Paragraphe centré marque l'en-tête du document marque le corps du document Balises obligatoires

176 Technologie WebSaïd TOUIL - CNFPT 176 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Structure d'un document HTML

177 Technologie WebSaïd TOUIL - CNFPT 177 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation marque le titre du document Apparaît dans la barre de titre du navigateur et utilisé pour les signets (bookmarks) Entête d'un document HTML -... contient la méta-information Attention: n'apparaît dans le corps du texte contient le code de caractère utilisé par le document, assez important

178 Technologie WebSaïd TOUIL - CNFPT 178 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Caractères accentués et spéciaux Exemples : a d a < b if c>d a < b if c>d

179 Technologie WebSaïd TOUIL - CNFPT 179 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Caractères accentués et spéciaux (2)

180 Technologie WebSaïd TOUIL - CNFPT 180 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Description du document Faciliter l'indexation La balise META M etadata de HEAD décrivant le document Faciliter la sélection des documents

181 Technologie WebSaïd TOUIL - CNFPT 181 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Exemple de la balise META (2)

182 Technologie WebSaïd TOUIL - CNFPT 182 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Corps d'un document HTML 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)

183 Technologie WebSaïd TOUIL - CNFPT 183 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Couleurs Code RGB = Red Green Blue Signe # 6 chiffres hexas, 2 digits par couleur # = 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

184 Technologie WebSaïd TOUIL - CNFPT 184 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Principaux marquages de texte Un paragraphe est marqué par Les différents titres sont marqués par,,... (ordre décroissant) ou etc : paramètre align=''left'', ''right'', ''center''... insère un simple saut de ligne permet de faire un pied de page (copyright, adresse webmaster...)

185 Technologie WebSaïd TOUIL - CNFPT 185 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les titres - Exemple

186 Technologie WebSaïd TOUIL - CNFPT 186 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Formatage du texte pour mise en exposant pour indices pour gras (bold) pour italiques pour texte plus grand pour souligné (underline) pour texte plus petit et pour barré

187 Technologie WebSaïd TOUIL - CNFPT 187 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les commentaires

188 Technologie WebSaïd TOUIL - CNFPT 188 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Police et taille du texte

189 Technologie WebSaïd TOUIL - CNFPT 189 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Police et taille du texte - Exemples

190 Technologie WebSaïd TOUIL - CNFPT 190 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Barre séparatrice horizontale (pas fermée) size pour taille (épaisseur) width taille en pixels ou en % (width=''50%'') noshade=''noshade'' Align = ''left'', ''center'', ''right'',...

191 Technologie WebSaïd TOUIL - CNFPT 191 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Listes

192 Technologie WebSaïd TOUIL - CNFPT 192 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Listes (2) Plusieurs niveaux emboîtables, types de liste également (indentation des niveaux juste pour clarté visuelle)

193 Technologie WebSaïd TOUIL - CNFPT 193 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Listes (3) - Exemple

194 Technologie WebSaïd TOUIL - CNFPT 194 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Listes de définitions Ouverture d'une liste Terme à définir Définitions

195 Technologie WebSaïd TOUIL - CNFPT 195 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Listes de définitions - Exemple

196 Technologie WebSaïd TOUIL - CNFPT 196 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 Titre 1

197 Technologie WebSaïd TOUIL - CNFPT 197 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation URL (Uniform Ressource Locator) URL absolue Format d'une URL pour HTTP, FTP protocole://dnsmachine:port/rep/fic#target

198 Technologie WebSaïd TOUIL - CNFPT 198 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Créer un hyperlien Créer un lien (sur image ou texte) Paramètre href URL de la page à atteindre Paramètre target=''_blank'' nouvelle fenêtre navigateur la page contact Exemple :

199 Technologie WebSaïd TOUIL - CNFPT 199 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 :

200 Technologie WebSaïd TOUIL - CNFPT 200 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les images Insérer une image 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|... ''

201 Technologie WebSaïd TOUIL - CNFPT 201 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les images (2) - Exemple

202 Technologie WebSaïd TOUIL - CNFPT 202 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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)

203 Technologie WebSaïd TOUIL - CNFPT 203 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les balises DIV et SPAN – Exemple 1

204 Technologie WebSaïd TOUIL - CNFPT 204 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les balises DIV et SPAN – Exemple 2

205 Technologie WebSaïd TOUIL - CNFPT 205 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les tableaux Clé de toute mise en page Elément Légende de tableau Nouvelle ligne de tableau (table row) Nouvelle cellule de tableau (table data) Cellules de titre (table head) On préfère utiliser les feuilles de styles CSS pour réaliser des mises en page évoluées

206 Technologie WebSaïd TOUIL - CNFPT 206 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les tableaux - Exemple

207 Technologie WebSaïd TOUIL - CNFPT 207 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation L'élément b order 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

208 Technologie WebSaïd TOUIL - CNFPT 208 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Alignement des cellules Dans alignement pour toute la ligne Dans 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

209 Technologie WebSaïd TOUIL - CNFPT 209 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Fusionner des cellules Pratique pour les en-têtes Attribut colspan dans ou é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 ou é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

210 Technologie WebSaïd TOUIL - CNFPT 210 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les tableaux – Exemple récapitulatif

211 Technologie WebSaïd TOUIL - CNFPT 211 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation LES FEUILLES DE STYLES CSS Cascading Style Sheets

212 Technologie WebSaïd TOUIL - CNFPT 212 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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.

213 Technologie WebSaïd TOUIL - CNFPT 213 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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.

214 Technologie WebSaïd TOUIL - CNFPT 214 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Trois niveaux de CSS CSS Level 1, CSS Positionning, CSS 2 Cascading Style Sheets CSS 2.1 pour HTML et XML 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

215 Technologie WebSaïd TOUIL - CNFPT 215 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Feuille de style interne Feuille de style externe Incorporation de CSS dans HTML

216 Technologie WebSaïd TOUIL - CNFPT 216 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Feuille de style en ligne Feuille de style importé Incorporation de CSS dans HTML (2) Balises non concernées par l'application de styles : BASE,BASEFONT,HEAD,HTML,META,SCRIPT,STYLE.

217 Technologie WebSaïd TOUIL - CNFPT 217 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Définition de styles externes et cascadés

218 Technologie WebSaïd TOUIL - CNFPT 218 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 Texte La balise DIV Permet de modifier des blocs de paragraphes Paragraphes Exemple : Vous constatez que ce texte n'est pas totalement en vert.

219 Technologie WebSaïd TOUIL - CNFPT 219 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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

220 Technologie WebSaïd TOUIL - CNFPT 220 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Styles en cascade (2) - Exemple

221 Technologie WebSaïd TOUIL - CNFPT 221 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Plusieurs feuilles de styles Plusieurs feuilles associées au document La dernière définition d'un tag l'emporte sur les autres Styles alternatifs sélectionnables suivant le browser

222 Technologie WebSaïd TOUIL - CNFPT 222 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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

223 Technologie WebSaïd TOUIL - CNFPT 223 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 '';''

224 Technologie WebSaïd TOUIL - CNFPT 224 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les sélecteurs Sélecteur de classe H1.nouveau { color: #FF0000 } Tout Nouveau !.nouveau { color: #FF0000} Sélection de tous les éléments de même classe. Sélecteur ID #intro { letter-spacing: 0.3em } Introduction H1#intro { letter-spacing: 0.3em }

225 Technologie WebSaïd TOUIL - CNFPT 225 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 }

226 Technologie WebSaïd TOUIL - CNFPT 226 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 Texte à mettre en rouge et en gras 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 Attention à ce message (il faut en tenir compte)

227 Technologie WebSaïd TOUIL - CNFPT 227 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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

228 Technologie WebSaïd TOUIL - CNFPT 228 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 ) 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 : ' « ' ' »' }

229 Technologie WebSaïd TOUIL - CNFPT 229 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 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 { size:landscape; margin-left: é.5cm; } Les pseudo-classes de texte Appliquer un style à une partie d'un texte délimité par ( ) 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; }

230 Technologie WebSaïd TOUIL - CNFPT 230 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 i n, cm, mm pouces, centimètres, milimètres pt point, 1/72 pouce pc pica, 12points L es unités

231 Technologie WebSaïd TOUIL - CNFPT 231 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 } L es couleurs – différentes façons pour définir 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)

232 Technologie WebSaïd TOUIL - CNFPT 232 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 : p ositionnement d'un texte L e positionnement

233 Technologie WebSaïd TOUIL - CNFPT 233 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Exemple 2 : p ositionnement d'une image L e positionnement (2)

234 Technologie WebSaïd TOUIL - CNFPT 234 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Pour les polices de caractères f ont-family: arial; font-size: x-large; font-style: bold Quelques propriétés 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;

235 Technologie WebSaïd TOUIL - CNFPT 235 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation DOM & SCRIPT (JS) Côté client

236 Technologie WebSaïd TOUIL - CNFPT 236 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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)

237 Technologie WebSaïd TOUIL - CNFPT 237 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Document Object Model (2) Document représenté sous forme d'arbre notion de hiérarchie (mère/enfant, précédence, etc...)

238 Technologie WebSaïd TOUIL - CNFPT 238 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Document Object Model (3) DOM Level 1 Accès et manipulation de la structure d'un document XML ou HTML (Specification) DOM Level 2 CSS, Range, Filtres et Itérateurs, Evénements utilisateur et de transformation, Namespaces (Core Specification)

239 Technologie WebSaïd TOUIL - CNFPT 239 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 …

240 Technologie WebSaïd TOUIL - CNFPT 240 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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

241 Technologie WebSaïd TOUIL - CNFPT 241 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation INTRODUCTION À PHP

242 Technologie WebSaïd TOUIL - CNFPT 242 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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).

243 Technologie WebSaïd TOUIL - CNFPT 243 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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é)

244 Technologie WebSaïd TOUIL - CNFPT 244 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 nest pas accessible par un client web.

245 Technologie WebSaïd TOUIL - CNFPT 245 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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)

246 Technologie WebSaïd TOUIL - CNFPT 246 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 dune pseudo-balise : Dautres alternatives : ASP, JSP, CGI, Perl,...

247 Technologie WebSaïd TOUIL - CNFPT 247 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Présentation – Exemple

248 Technologie WebSaïd TOUIL - CNFPT 248 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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.

249 Technologie WebSaïd TOUIL - CNFPT 249 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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. Ceci sera ignoré. Ceci sera également ignoré.

250 Technologie WebSaïd TOUIL - CNFPT 250 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation La syntaxe de base (2) Ceci est vrai. Ceci est vrai.

251 Technologie WebSaïd TOUIL - CNFPT 251 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation La syntaxe de base (3) 1. 2. echo 'quelques éditeurs (comme FrontPage) n\'aiment pas ce genre d\'instructions'; 3. Ceci est la version courte pour ''

252 Technologie WebSaïd TOUIL - CNFPT 252 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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.

253 Technologie WebSaïd TOUIL - CNFPT 253 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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.

254 Technologie WebSaïd TOUIL - CNFPT 254 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Commentaires PHP supporte les commentaires 'C', 'C++' et Unix shell - style

255 Technologie WebSaïd TOUIL - CNFPT 255 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les types

256 Technologie WebSaïd TOUIL - CNFPT 256 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les types (2)

257 Technologie WebSaïd TOUIL - CNFPT 257 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les types (3)

258 Technologie WebSaïd TOUIL - CNFPT 258 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les types (4)

259 Technologie WebSaïd TOUIL - CNFPT 259 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les types (5)

260 Technologie WebSaïd TOUIL - CNFPT 260 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les types (6)

261 Technologie WebSaïd TOUIL - CNFPT 261 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 :

262 Technologie WebSaïd TOUIL - CNFPT 262 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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.

263 Technologie WebSaïd TOUIL - CNFPT 263 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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. Guillements simples 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

264 Technologie WebSaïd TOUIL - CNFPT 264 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 ''vieux'', 12 => true); echo $arr['''age']; //vieux echo $arr[12]; //1 ?>

265 Technologie WebSaïd TOUIL - CNFPT 265 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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

266 Technologie WebSaïd TOUIL - CNFPT 266 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 $a=10; $b=&$a;

267 Technologie WebSaïd TOUIL - CNFPT 267 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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

268 Technologie WebSaïd TOUIL - CNFPT 268 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les variables (3) Exemple 1 Fichier test.phpFichier b.inc ?> Ici, la variable $a sera accessible dans le script inclus b.inc

269 Technologie WebSaïd TOUIL - CNFPT 269 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les variables (4) Exemple 2 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

270 Technologie WebSaïd TOUIL - CNFPT 270 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les variables (5) Le mot clé global Ici, le script retourne la valeur 3

271 Technologie WebSaïd TOUIL - CNFPT 271 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 cette fonction est inutile car à chaque fois qu'elle est appelée, elle initialise $a à 0 et affiche ''0''

272 Technologie WebSaïd TOUIL - CNFPT 272 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les variables (7) Les variables static (2) Maintenant à chaque fois que la fonction Compteur() est appelée, elle affichera une valeur de $a incrémentée de 1

273 Technologie WebSaïd TOUIL - CNFPT 273 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 Affichera : bonjour le monde

274 Technologie WebSaïd TOUIL - CNFPT 274 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation GESTIONS DES FORMULAIRES

275 Technologie WebSaïd TOUIL - CNFPT 275 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Pour interaction avec l'utilisateur Les formulaires Programme sur le serveur (ou script JavaScript) retourne une page de résultats Formulaires forum, contact, QCM, moteur de recherche, etc... Script CGI programme sur le serveur qui traite des données

276 Technologie WebSaïd TOUIL - CNFPT 276 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Balise 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 La balise

277 Technologie WebSaïd TOUIL - CNFPT 277 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation A inclure dans Les champs (contrôles) Pratiquement tous 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

278 Technologie WebSaïd TOUIL - CNFPT 278 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Les cases à cocher et boutons radio 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 plusieurs valeurs nécessaires avec même nom checked=''checked'' optionnel mais recommandé (1er de la série par défaut)

279 Technologie WebSaïd TOUIL - CNFPT 279 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Envoi du formulaire Les boutons name optionnel, envoye le contenu de value Autres boutons nécessaire de définir une action javascript Effacement Image équivalent à submit

280 Technologie WebSaïd TOUIL - CNFPT 280 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Valeurs à transmettre que l'utilisateur n'a pas besoin/droit de modifier Soumettre des valeurs cachées

281 Technologie WebSaïd TOUIL - CNFPT 281 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Pour sélectionner valeur (=ComboBox) name='''' size='''' nombre d'éléments visibles en même temps multiple=''multiple'' sélection multiple possible Les sélecteurs de liste inclut les options possibles value='''' valeur à transmettre (si absent, envoie la valeur incluse dans option selected=''selected'' valeur par défaut Exemple :

282 Technologie WebSaïd TOUIL - CNFPT 282 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Textes longs, multilignes 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 Les champs textes multilignes Ce texte est affiché dans le formulaire

283 Technologie WebSaïd TOUIL - CNFPT 283 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Exemples de formumaires

284 Technologie WebSaïd TOUIL - CNFPT 284 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Exemples de formumaires (2)

285 Technologie WebSaïd TOUIL - CNFPT 285 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation LES BASES DE DONNEES ET LE WEB

286 Technologie WebSaïd TOUIL - CNFPT 286 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation Site Internet dynamique – Principe de fonctionnement Envoi dune requête depuis une page web Ex: variables dans un formulaire Traitement des données par le serveur Ex: Interrogation dune base de données MySQL Renvoi du résultat sous forme de document HTML Ex: Affichage HTML sous forme de tableau

287 Technologie WebSaïd TOUIL - CNFPT 287 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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.

288 Technologie WebSaïd TOUIL - CNFPT 288 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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: affiche la page accueil.htm, stockée telle quelle sur le serveur, page dynamique: 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.).

289 Technologie WebSaïd TOUIL - CNFPT 289 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation P age 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.

290 Technologie WebSaïd TOUIL - CNFPT 290 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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 :

291 Technologie WebSaïd TOUIL - CNFPT 291 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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.

292 Technologie WebSaïd TOUIL - CNFPT 292 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Conception & Réalisation 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.

293 Technologie WebSaïd TOUIL - CNFPT 293 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web TP & Mise en pratique TP & Mise en pratique

294 Technologie WebSaïd TOUIL - CNFPT 294 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web TP & Mise en pratique Editeurs HTML

295 Technologie WebSaïd TOUIL - CNFPT 295 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web TP & Mise en pratique Editeurs HTML (2)

296 Technologie WebSaïd TOUIL - CNFPT 296 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web TP & Mise en pratique 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.

297 Technologie WebSaïd TOUIL - CNFPT 297 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web TP & Mise en pratique Mise en place de la structure du site (2) Exemple de design pour les pages

298 Technologie WebSaïd TOUIL - CNFPT 298 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web TP & Mise en pratique 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.

299 Technologie WebSaïd TOUIL - CNFPT 299 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web Questions & Réponses

300 Technologie WebSaïd TOUIL - CNFPT 300 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web REFERENCES Références

301 Technologie WebSaïd TOUIL - CNFPT 301 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web REFERENCE PHP Langage PHP Site officiel: Ouvrage de référence: Leon Atkinson, Core PHP Programming, Prentice Hall PTR

302 Technologie WebSaïd TOUIL - CNFPT 302 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web REFERENCE MySQL Site officiel: Bases de données MySQL Ouvrage de référence: Paul DuBois, MySQL, CampusPress (collection Référence)

303 Technologie WebSaïd TOUIL - CNFPT 303 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web REFERENCES DIVERS


Télécharger ppt "Technologie WebSaïd TOUIL - CNFPT 1 Paris ***** Du 6 au 7 septembre 2010 Installer et configurer un serveur Web PLAN DE FORMATION Introduction Les enjeux."

Présentations similaires


Annonces Google