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

PLAN DE FORMATION Introduction Installer et configurer un serveur Web

Présentations similaires


Présentation au sujet: "PLAN DE FORMATION Introduction Installer et configurer un serveur Web"— Transcription de la présentation:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

25 RÔLE D'UN SERVEUR WEB Que peut faire un serveur (5) :
Installer et configurer un serveur Web Que peut faire un serveur (5) : Reconnaitre les entêtes de requêtes et servir des pages différentes suivant le client ou ses préférences Avoir des pages différentes selon le browser Parler la langue demandée (exemple de site : qui réagit selon le language souhaité Voir les modes de Apache suivant :

26 RÔLE D'UN SERVEUR WEB Que peut faire un serveur (6) :
Installer et configurer un serveur Web Que peut faire un serveur (6) : Lister des directories Voir le mod_dir de Apache ( Encrypter les données et sécuriser les transactions Voir le ssl Apache (

27 RÔLE D'UN SERVEUR WEB Que peut faire un serveur (7) :
Installer et configurer un serveur Web Que peut faire un serveur (7) : Répondre différemment suivant le nom de la machine Une même machine peut porter (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)

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

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

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

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

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

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

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

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

36 LES SERVICES WEB Installer et configurer un serveur Web SERVICES WEB

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

63 PROTOCOLES & ADRESSES Identification de machines sur Internet
Installer et configurer un serveur Web Identification de machines sur Internet Une machine = un numéro Adresse IP universelle unique 4 nombres de 8 bits (4 octets) Séparés par des points Ex : Classes d'adresses / organisations 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 PROTOCOLES & ADRESSES Noms de ressources sur Internet
Installer et configurer un serveur Web Noms de ressources sur Internet Idée : associer à l'adresse IP un nom de machine Ex. lisiperso15.univ-paris13.fr # Nom de machine Décomposé hiérarchiquement Domaine (critère géographique, institutionnel, organisationnel,...) Sous domaine (éventuellement) Nom local de la machine Attribution ICANN : Internet Corporation for Assigned Names and Numbers .gov, .edu, etc. AFNIC : Association Française pour le Nommage Internet en Coopération .fr, .gouv.fr, .asso

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

82 Install & Config d'un Site Web
Installer et configurer un serveur Web Introduction à WAMP Wamp Server 2 est la nouvelle version de WAMP5. Wamp Server 2.0i est composé de Apache , 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. Nous allons voir comment installer Wamp server 2.0i en français. Lien pour téléchager Wamp server.

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

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

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

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

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

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

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

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

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

92 Install & Config d'un Site Web
Installer et configurer un serveur Web Installer WampServer 2.0 (10) Le programme de configuration de Wamp vous demandera alors des précisions concernant le serveur SMTP que vous souhaitez utiliser. Ceci est nouveau dans Wamp, et permet de spécifier le nom du serveur smtp qui sera utilisé pour l'envoi des mails par la fonction mail() de PHP. Si vous avez un serveur mail capable d'envoyer des mails sur votre PC, vous pouvez mettre son nom (localhost..). Sinon, en règle générale, vous pouvez utiliser le serveur SMTP de votre fournisseur d'accès internet. Ici smtp.free.fr par exemple. Puis entrez votre adresse , 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 Install & Config d'un Site Web
Installer et configurer un serveur Web Installer WampServer 2.0 (11) Cliquez sur "Next", puis sur "Finish". Vous pouvez laisser la case "Launch WampServer 2 now" cochée, afin de lancer Wamp immédiatement après la fin de l'installation.

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

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

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

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

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

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

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

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

102 Install & Config d'un Site Web
Installer et configurer un serveur Web Serveur Apache – httpd.conf (2) Ce fichier contient les directives propres au fonctionnement du serveur lui-même. Il existe plein d'information sur internet concernant les directives de configuration de ce fichier. Exemple de lien concernant les directives de configuration de ce fichier.

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

104 Install & Config d'un Site Web
Installer et configurer un serveur Web Serveur Apache – access.log (2) Ce fichier contient les informations concernant les accès à votre serveur. Chaque ligne est par défaut de la forme : [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 Install & Config d'un Site Web
Installer et configurer un serveur Web Serveur Apache - error.log Ce fichier se trouve dans le répertoire suivant

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

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

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

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

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

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

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

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

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

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

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

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

118 Install & Config d'un serveur FTP
Installer et configurer un serveur Web Installation du serveur FTP Téléchargement de la version sur le site

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

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

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

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

123 Install & Config d'un serveur FTP
Installer et configurer un serveur Web Installation du serveur FTP (5) Détaillons les différentes options disponibles : Installer comme un service, démarré avec Windows (défaut) : ➔ Le serveur ftp est installé en tant que service et démarre en même temps que Windows (c'est l'option par défaut). Utile si votre serveur ftp doit tourner de façon ininterrompue sans pour autant être relancé par une personne à chaque fois que la machine redémarre. Installer comme un service, démarré manuellement : ➔ Le serveur ftp est installé en tant que service mais démarre manuellement (grâce au raccourci adéquate dans le menu de FileZilla Server). Utile si vous pensez utiliser votre serveur ftp de façon occassionnel. Ne pas installer comme un service, démarrage manuel (non recommandé) : ➔ Le serveur ftp n'est pas installé en tant que service et démarre de manière manuel. L'option qui pourrait être utilisée si vous n'êtes pas sous un environnement XP ou 2000 mais que vous souhaitez avoir un serveur ftp. Le port (par défaut) utilisé pour l'administration du serveur ftp est 14147, bien entendu vous pouvez le changer pour répondre à vos besoins, le port dans ce cas doit être compris entre 1 et 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 Install & Config d'un serveur FTP
Installer et configurer un serveur Web Installation du serveur FTP (6) Là, que nous avons vu l'installation du service, voyons le type de démarrage pour l'interface d'administration.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

142 Intéraction avec le Navigateur (6)
Installer et configurer un serveur Web Réponse HTTP (2) Le corps de la réponse : il contient le document demandé Une réponse HTTP a donc la syntaxe suivante : VERSION-HTTP CODE EXPLICATION<crlf> EN-TÊTE : Valeur<crlf> . Ligne vide<crlf> CORPS DE LA REPONSE Exemple : HTTP/ 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 Fonctionnement d'un site Internet / Intranet
Installer et configurer un serveur Web Fonctionnement d'un site Internet / Intranet

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

145 Site Internet / Intranet (1)
Installer et configurer un serveur Web 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. 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

214 Conception & Réalisation
Installer et configurer un serveur Web Trois niveaux de CSS CSS Level 1, CSS Positionning, CSS 2 Cascading Style Sheets CSS 2.1 pour HTML et XML 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 Conception & Réalisation
Installer et configurer un serveur Web Incorporation de CSS dans HTML Feuille de style interne Feuille de style externe

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

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

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

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

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

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

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

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

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

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

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

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

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

229 Conception & Réalisation
Installer et configurer un serveur Web La pseudo-classe descendante Appliquer un style à la première balise au sein d'un élément en utilisant le symbole ''>'' et la pseudo-classe :first-child Exemple : p > A:first-child {color: #00FF00; } Les pseudo-classes de page Le 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 (<P>) 2 pseudo-classes : :first-line (la première ligne du texte) et :first-letter (la première lettre du texte) Exemple : P:first-letter {font-size: 200%; font-weight: bold; }

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

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

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

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

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

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

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

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

238 Conception & Réalisation
Installer et configurer un serveur Web Document Object Model (3) DOM Level 1 Accès et manipulation de la structure d'un document XML ou HTML (Specification) DOM Level 2 CSS, Range, Filtres et Itérateurs, Evénements utilisateur et de transformation, Namespaces (Core Specification)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

288 Conception & Réalisation
Installer et configurer un serveur Web Qu'est-ce qu'une page dynamique (2) On reconnaît facilement un page dynamique grâce à l'URL qui s'affiche dans le navigateur web de l'utilisateur : • page statique: 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 Conception & Réalisation
Installer et configurer un serveur Web Page dynamique et bases de données L'accès aux bases de données est l'une des fonctions essentielles des pages dynamiques. Comment publier une base de données sur le web? Quels sont les différents types d'accès? Quels sont les grands standards? Pour des applications web et e-business, les bases de données sont très rapidement devenues indispensables.

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

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

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

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

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

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

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

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

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

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

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

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

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

303 REFERENCES DIVERS Installer et configurer un serveur Web


Télécharger ppt "PLAN DE FORMATION Introduction Installer et configurer un serveur Web"

Présentations similaires


Annonces Google