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

Technologie WebSaïd TOUIL - CNFPT 1

Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010

Installer et configurer un serveur Web

PLAN DE FORMATION

Introduction

Les enjeux

Le rôle d'un serveur Web

Le modèle Client/Serveur

Les services Web

Les protocoles et les adresses

La norme CGI


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


PLAN DE FORMATION

Installation et configuration d'un site Web

Installation de WampServer2 sous Windows

Présentations des fichiers de configurations

Configuration d'un site Web minima

Lancement du site dans le navigateur

Installation et configuration d'un serveur FTP


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


PLAN DE FORMATION

Fonctionnement site Web / Navigateur

Principe de fonctionnement d'un navigateur

Comment le site Web interagit avec le navigateur

Fonctionnement d'un site Internet/Intranet


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


PLAN DE FORMATION

Conception et réalisation de pages Web

Le langage HTML

Les feuilles de styles CSS

DOM et script (JS) côté client

Introduction à PHP

Gestions des formulaires

Les bases de données et le Web


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


PLAN DE FORMATION

TP et mise en pratique

Editeurs HTML

Mise en place de la structure du Site

Réalisation du site Web (choix de l'éditeur)

KompozerFirstPageToWeb


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES ENJEUX

LES ENJEUX DU WEB


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES ENJEUX

Le web se définit comme une plateforme, en interaction entre le visiteur et le site lui-même :

Le public devient éditeur de contenus (ex: blogs, youtube)

Il décide comment visualiser l'information (système de vote)

Il crée des communautés d'intérêt (de part l'utilisation qu'il fait du web)

Deux types d'enjeux accompagne cette tendance :

Economiques et financiers : investisseurs, monétisation de la publicité, vitrine et image de marque de la société

Technologiques : nouveaux langages, nouvelles normes graphiques, utilisation de Framework, faciliter les échanges d'informations


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES ENJEUX

Appétit des investisseurs (fonds de capital risque, business angels et cercle familial) pour les projets web

Levée de fond de Dailymotion pour 25M€, rachat de CityDeal par Groupon

Le fond Séquoia Capital a investi 11M€ à la création de youtube et a récupéré presque 500M€ lors de sa revente à Google 20 mois plus tard

LES ENJEUX ECONOMIQUES & FINANCIERS

Des outils matériels et logiciels à très bas prix (voire gratuits pour les logiciels libres) permettant de lancer un projet web sans barrière financière


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES ENJEUX

Nouveaux modèles économiques basés autour de la gratuité de service, de la publicité ciblée, de la collaboration des internautes

Google : AdWord, AdSense

Amazon : en partant d'un produit « best seller », les marchands en ligne oriente vers des articles moins connu mais en relation directe

LES ENJEUX ECONOMIQUES & FINANCIERS (2)

Aider les internautes à se rencontrer, à communiquer, à échanger, à dialoguer, à vendre/acheter

Inciter les utilisateurs à créer ou à participer eux-mêmes leurs sites Internet

Fédérer les visiteurs autour d'un même sujet d'intérêt ou d'un même service et ainsi les inciter à venir et revenir régulièrement


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES ENJEUX

Applications au contenu riche : facilité de mise à jour, remises en forme en fonction des désirs du visiteurs, plus intuitives et agréables à utiliser

Trouver/réaliser le plus rapidement/efficacement possible

Les gens qui avaient l'habitude d'être des consommateurs d'informations deviennent maintenant des éditeurs de plein droit (Wikipédia)

LES ENJEUX TECHNOLOGIQUES

AJAX : Utilisation/regroupement de plusieurs technologies

Communication asynchrone : un intermédiaire est ajouté entre le serveur et le client à la manière d'une nouvelle couche logicielle

Les podcasts ont fait baisser les coûts et supprimé les barrières technologiques de la diffusion audio vidéo (ex: HEC ItunesU avec un système de cours en ligne


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


RÔLE D'UN SERVEUR WEB

LE RÔLE DU SERVEUR

WEB


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Le plus souvent, un serveur Web fait fonctionner plusieurs logiciels qui fonctionnement en parallèle.

On retrouve la combinaison suivante :

Apache (serveur HTTP)

MySQL (serveur de base de données)

PHP (langage de programmation)

Se sont des logiciels libres.

Un serveur Web peut être (2) :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Sous Linux, cette combinaison porte le nom LAMP comme (Linux, Apache, MySQL, PHP).

Sous Windows, cette combinaison porte le nom WAMP comme (Windows, Apache, MySQL, PHP).

Sous Mac, cette combinaison porte le nom MAMP comme (Macintosh, Apache, MySQL, PHP).

La plupart des ordinateurs utilisés comme serveur Web sont reliés à Internet et hébergent des sites Web du WWW.

Les autres serveurs se trouvent sur des Intranets et hébergent des documents internes d'une entreprise, d'une administration.

Un serveur Web peut être (3) :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Différents types de serveur :

Apache (le plus répandu sur Unix/Linux/Windows).

Microsoft Information Server (IIS sur Windows Server).

Jigsaw (Java, portable).

Netscape Server (Unix, Windows Server).

MacHTTP (Mac).

http://webcompare.internet.com : pour une comparaison complète de tous les serveurs disponibles.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Un exemple : le serveur APACHE

Gratuit (license GNU)

Modulaire

Efficace

Simple

Robuste (c'est le plus utilisé)

http://www.apache.org


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Envoi de la réponse au client

Mise à jour des fichiers de logs

Traitements évolués (interprète perl ,php, accès à des BDs, etc...

Rôle d'un serveur (ici APACHE) (2) :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Exemple de configuration (serveur APACHE)

Fichier httpd.conf

Fichier access.conf

Mime.types (ou TypeConfig dans httpd.conf)

Certains serveurs utilisent un découpage différents ou une interface graphique

pid

error_log access_log

Trois fichiers de logs (par défaut)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Que peut faire un serveur :

Servir une page en ajoutant des entêtes appropriés

Cas le plus commun

Servir une page telle quelle

Utile pour des pages à expiration rapide (mod_assis)

Interprétation de formulaires (mod_cgi)

Exécuter un script et renvoyer le résultat comme une page

Exécuter un script et renvoyer le résultat tel quel

Scripts dit nph (Non Parsed Hearder)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010




Vérifier la machine d'origine (ou le dernier proxy sur la chaîne)

Certaines autorisations

Voir le mod_access de Apache (http://www.apache.org/docs/mod_access.html)

Voir le mod_auth de Apache (http://www.apache.org/docs/mod_auth.html)

Vérifier le mot de passe et un login


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010




Construire une page au vol avec des ordres spécifiques

Equivalents de #include

Permet d'insérer le résultat de scripts dans des pages (compteurs, date du jour, dernière date de modification)

Voir le mod_include de Apache (http://www.apache.org/docs/mod_include.html)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010




Reconnaitre les entêtes de requêtes et servir des pages différentes suivant le client ou ses préférences

Avoir des pages différentes selon le browser

Parler la langue demandée (exemple de site : http://babel.alis.com) qui réagit selon le language souhaité

Voir les modes de Apache suivant :

http://www.apache.org/docs/content-negotiation.html

http://www.apache.org/docs/mod_mime.html


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010




Lister des directories

Voir le mod_dir de Apache (http://www.apache.org/docs/mod_dir.html)

Encrypter les données et sécuriser les transactions

Voir le ssl Apache (http://www.apache-ssl.org)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010




Répondre différemment suivant le nom de la machine

Une même machine peut porter plusieurs @IP (interfaces virtuelles)

Une même machine peut porter plusieurs noms, même si elle n'a qu'une @IP

Les serveurs Web savent gérer ces cas de figure : une seule machine avec une seule carte réseau et une seule @IP peut héberger plusieurs serveurs WWW virtuels

Par exemple : répondre à http://www.monsite.fr et http://www.monsite2.fr en renvoyant des pages différentes et en maintenant des logs et des configs propres à chaque serveur Virtuel (voir le mode vhosts de Apache)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LE MODELE CLIENT/SERVEUR

ARCHITECTURE CLIENT / SERVEUR


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Il est initialement passif (ou esclave, en attente de requête) ; Il est à l'écoute, prêt à répondre aux requêtes envoyées par des

clients ;

Caractéristiques d'un serveur :

Dès qu'une requête lui parvient, il traite la demande et envoie une réponse.

Caractéristiques d'un client : Il est actif le premier (ou maître) ;

Il envoie des requêtes au serveur ;

Il attend et reçoit les réponses du serveur ;


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les termes « trois tiers » et « multi-tiers » sont traduits de l'anglais three tier et multi-tier ou n-tier. Pour cette raison, il est préférable d'employer la traduction « trois niveaux » et multi-niveaux ».

Architectures trois tiers et multi-tiers :

L'architecture client/serveur possède deux types d'ordinateurs sur un réseau : les clients et les serveurs, elle possède donc deux niveaux et s'appelle two-tier en anglais.

Les architectures multi-tier (ou distribuées) scindent le serveur en plusieurs entités (par exemple, un serveur d'application qui lui-même est le client d'un serveur de base de données).


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Avantages

Comparaison avec les architectures distribuées:

Toutes les données sont centralisées sur un seul serveur, ce qui simplifie les contrôles de sécurité et la mise à jour des données et des logiciels.

Les technologies supportant l'architecture client/serveur sont plus matures que les autres.

Une administration au niveau serveur, les clients ayant peu d'importance dans ce modèle, ils ont moins besoin d'être administrés.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Inconvénients

Comparaison avec les architectures distribuées:

Si trop de clients veulent communiquer avec le serveur au même moment, ce dernier risque de ne pas supporter la charge.

Si le serveur n'est plus disponible, plus aucun des clients ne marche.

Les coûts de mise en place et de maintenance sont élevés.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

SERVICES

WEB


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

Définition : Les services web (en anglais web services) représentent un

mécanisme de communication entre applications distantes à travers le réseau internet indépendant de tout langage de programmation et de toute plate-forme d'exécution :

utilisant le protocole HTTP comme moyen de transport. Ainsi, les communications s'effectuent sur un support universel ;

employant une syntaxe basée sur la notation XML pour décrire les

appels de fonctions distantes et les données échangées ;

organisant les mécanismes d'appel et de réponse.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

Définition (2) : Grâce aux services web, les applications peuvent être vues comme un

ensemble de services métiers, structurés et correctement décrits, dialoguant selon un standard international plutôt qu'un ensemble d'objets et de méthodes entremêlés.

Le premier bénéfice de ce découpage est la facilité de maintenance de l'application, ainsi que l'interopérabilité permettant de modifier facilement un composant (un service) pour le remplacer par un autre, éventuellement développé par un tiers.

Les services web facilitent non seulement les échanges entre les applications de l'entreprise mais surtout permettent une ouverture vers les autres entreprises. Les premiers fournisseurs de services web sont ainsi les fournisseurs de services en ligne (météo, bourse, planification d'itinéraire, pages jaunes, etc.), mettant à disposition des développeurs des API payantes ou non, permettant d'intégrer leur service au sein d'applications tierces.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES 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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES 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,...)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

Evolution du Web


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

Le Web 3ème génération

Demain :Un site Web est un composant fournissantdes services en XML - structure / sémantique - fusion possible

Aujourd’hui :Un site Web fournie des pages HTML - pas de structure - impossible à fusionner avec d’autres pages


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

Le Web 3ème génération (2)

Exemple 1

Exemple 2


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

Pourquoi faire

Les services Web permettent d’interconnecter :

Différentes entreprisesDifférents matérielsDifférentes applicationsDifférents clients

Distribuer et intégrer des logiques métiers

Les services Web sont faiblement couplés


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

Modèle client / serveur

Service Web

Service Web

XML

Service Web

Service WebXML

Client ClientXML

XMLXML

XML


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

Quels objectifs

Remplacer les protocoles actuels (RPC,DCOM,RMI) par une approche entièrement ouverte et interopérable, basée sur la généralisation des serveurs Web avec scripts CGI.

Faire interagir des composants hétérogènes, distants, etindépendants avec un protocole standard (SOAP).

Dédiés aux applications B2B (Business to Business), EAI(Enterprise Application Integration), P2P (Peer to Peer).


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

Et plus concrètement ?Une nouvelle technologie des objets distribués ?

Invocation distante des services Web : SOAPDescription des services Web : WSDLEnregistrement et découverte de services Web : UDDI

Basés sur des standards XMLStandards du W3C : XML, SOAP, WSDLStandards industriels : UDDI, ebXMLPropriétaires : DISCO, WSDD, WSFL, ASMX, …

Implémentations actuellesMicrosoft .NetSun JavaONE : J2EE + Web services (WSDP = JAXP,JAX-RPC,JAXM…)Apache XSOAP / AxisOracle, Bea, …


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

Architecture – Cycle de vie d'utilisation

AnnuaireUDDI

2 : J’ai trouvé ! Voici le serveurhébergeant ce service web

3 : Quel est le format d’appel duservice que tu proposes?

Client

ContratSOAP

Serveur

XML

4 : Voici mon contrat (WSDL)

1 : Je recherch

eu

n service W

EB

XML

5 : J’ai compris comment invoquerton service et je t’envoie un documentXML représentant ma requête

XML6 : J’ai exécuté ta requête et je te retourne le résultat


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

Cycle de vie complet

Etape 1 : Déploiement du service WebDépendant de la plate-forme (Apache : WSDD)

Etape 2 : Enregistrement du service WebWSDL : description du serviceRéférentiels : DISCO (local), UDDI (global)

Etape 3 : Découverte du service Web

Etape 4 : Invocation du service Web par le client


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

1: Déploiment du WS


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

2: Enregistriment du WS


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

3: Découverte du WS


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

4: Invocation du WS


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

Architecture globale


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

Avantages des WS

Les services Web fournissent l'interopérabilité entre divers logiciels fonctionnant sur diverses plates-formes.

Les services Web utilisent des standards et protocoles ouverts.

Les protocoles et les formats de données sont au format texte dans la mesure du possible, facilitant ainsi la compréhension du fonctionnement global des échanges.

Basés sur le protocole HTTP, les services Web peuvent fonctionner au travers de nombreux pare-feux sans nécessiter des changements sur les règles de filtrage.

Les outils de développement, s'appuyant sur ces standards, permettent la création automatique de programmes utilisant les services Web existants.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

Inconvénients des WS

Par l'utilisation du protocole HTTP, les services Web peuvent contourner les mesures de sécurité mises en place au travers des pare-feu.

Les services Web souffrent de performances faibles comparée à d'autres approches de l'informatique répartie telles que le RMI, CORBA.

Les normes de services Web dans certains domaines sont actuellement récentes.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LES SERVICES WEB

Lexique

SOAP : Simple Object Access Protocol

WSDL : Web Services Description Language

SOA : Service Oriented Architecture

RPC : Remote Procedure Call

API : Application Programming Interface

UDDI : Universal Description Discovery and Integration

RMI : Remote Method Invocation


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


PROTOCOLES & ADRESSES

Protocoles

Ensemble de règles et de procédure à respecter pour pouvoir échanger des données sur un réseau

Remarque : exemple de la vie courante Ca va ? () / Oui () / J’ai pas entendu () / Je répête : « Oui » ()

Définition

Exemples à différents niveaux Niveau programmes (A - B)

Tu fonctionnes ? (→) / Oui (←) / Envoie-moi le fichier toto.doc (→) / Ok c'est parti (←) / Bien reçu (→) / Au revoir (←)

Niveaux système d'exploitation Toi, système d'éxploitation de la machine machine1.univ-lyon1.fr, passe le

message « Tu fonctionnes ? » au programme qui écoute sur le port 3422 (→) Niveau cartes

Toi carte réseau, regarde passer des paquets de données sur le cable, attrape ceux qui sont pour toi, et passe-en le contenu au système d'éxploitation


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Protocoles de communication

compréhension entre machines / logiciels

But

Protocole pour l'échange de messages

un langage et un ensemble de règles

communications indépendantes du système d'exploitation ou de la plate-forme

limitation des erreurs/risques durant la transmission

que deux systèmes doivent connaître (parler le même langage)

les fabricants doivent se conformer aux normes ISO (International Standardization Organization) pour les protocoles utilisés sur leurs machines/logiciels

Modèle OSI (Open System Interconnection)

découpe le processus de transmission en 7 « couches »

chaque couche est responsable de l'un des aspects de la communication en réseau


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Modèle en couches

Personne Employeur

Lettre de motivation Lettre de motivation

Enveloppe Enveloppe

Centre de tri Centre de distribution

Route (camion)

acheminer récupérer

poster

cacheter

écrire

délivrer

ouvrir

lire

Candidature spontanée

Format de ce type de lettre

Envoi/réception courrier

Codification interne de la poste


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Modèle OSI les 7 couches

Application

Présentation

Transport

Réseau

Physique

Application : gestion des échanges de données entre programmes et services du réseau

Liaison de données

Session

Présentation : mise en forme des informations pour les rendre lisibles par les applications

Session : détection du mode de communication à utiliser entre machines et péréphériques / Surveillance des connexions

Transport : correction des erreurs de transmission; vérification de l'acheminement

Réseau : identification des machines connectées au réseau

Liaison de données : subdivision des informations en « paquets » pour livraison sur le réseau

Physique : contrôle du support de transmissions; circulation de l'information électrique


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Protocoles de l'Internet

IP (Internet Protocol)

Niveau OSI réseau

Niveau OSI transport / session

TCP (Transmission Control Protocol)

Adressage (routage) des informations

Identification des machines

Transfert d'information, contrôle des transmissions

Niveau OSI application

FTP (File Transfert Protocol) / Transfert de fichiers

HTTP (Hyper Text Transfert Protocol) / Transfert d'informations sur le Web

TCP/IPbase de l'internet

DNS (Domain Name Server protocol) / Conversion du nom des ordinateurs connectés au réseau en adresses IP


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Identification de machines sur Internet

4 nombres de 8 bits (4 octets)

Une machine = un numéro

Adresse IP universelle unique

Séparés par des points

Classes d'adresses / organisations

Ex : 134.214.128.17

Classe A : 112.x.y.z (ex. NAZA)

Classe B : 134.214.x.y (ex. Banque)

Classe C : 56.243.12.x (ex. Cyber-café)

Remarque : IPV6 16 octets

Commence à se mettre en place


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Noms de ressources sur Internet

Décomposé hiérarchiquement

Idée : associer à l'adresse IP un nom de machine

Nom de machine

Domaine (critère géographique, institutionnel, organisationnel,...)

Attribution

Ex. lisiperso15.univ-paris13.fr # 134.214.88.239

ICANN : Internet Corporation for Assigned Names and Numbers

AFNIC : Association Française pour le Nommage Internet en Coopération

Sous domaine (éventuellement)

Nom local de la machine

.gov, .edu, etc.

.fr, .gouv.fr, .asso


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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 ...

134.214.88.239

lisiperso15.univ-paris13.frDNS

dns.univ-paris13.fr

… et transmet la question à un autre DNS s'il ne sait pas répondre

www.ens-lyon.fr ? www.ens-lyon.fr ? DNSDNS

140.77.167.3 140.77.167.3dns.univ-lyon1.fr


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LA NORME CGI

LA NORME CGI


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LA NORME CGI

Présentation de l'interface CGI

Un script CGI (Common Gateway Interface, soit interface de passerelle commune) est un programme exécuté par le serveur web (on dit généralement « côté serveur »)

Il permet d'envoyer au navigateur de l'internaute un code HTML créé automatiquement par le serveur (ex: sur une autre application, telle qu'un système de gestion base de données, d'où le nom de passerelle)

Principaux intérêts de l'utilisation de CGI est la possibilité de fournir des pages dynamiques. C'est-à-dire des pages personnalisées selon un choix ou une saisie de l'utilisateur

Ex d'application : l'utilisation de formulaire HTML dans des pages web, choisir ou saisir des données, puis clique sur un bouton de soumission du formulaire, envoyant les données du formulaire en paramètre du script CGI


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LA NORME CGI

Langage de programmation des CGI

Un programme CGI peut être écrit dans à peu près n'importe quel langage de programmation, il doit être :

Capable de lire le flux de données d'entrée ;

Capable de traiter des chaînes de caractères ;

Capable d'écrire sur le flux standard de sortie ;

Exécutable ou interprétable par le serveur Web.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LA NORME CGI

Langage de programmation des CGI (2)

Les langages de programmatin les plus utilisés pour l'écriture des CGI sont les suivants :

Le langage Perl, particulièrement adapté à la manipulation de chaînes de caractères ;

Les langages C et C++ ;

Le langage Java.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LA NORME CGI


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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LA NORME CGI


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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LA NORME CGI


En effet, lorsqu'un programme CGI renvoie un fichier, il doit commencer par envoyer un en-tête HTTP permettant de préciser le type de contenu envoyé au navigateur (appelé type MIME), c'est-à-dire :

Dans le cas d'un fichier HTML, la chaîne suivante :

Dans le cas d'un fichier GIF, la chaîne suivante :

Content-type : text/html

Content-type : image/gif


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LA NORME CGI

Notion d'URL et d'en-tête HTTP

Une URL (Uniform Ressource Locator) est une adresse permettant de localiser un fichier sur internet de manière unique.

Le fichier demandé,

L'adresse IP du demandeur,

Grâce à cette adresse qu'il est possible d'effectuer des requêtes vers des pages Web.

Cette adresse saisie dans le navigateur, celui-ci localise le serveur Web et lui transmet une requête via le protocole HTTP (HyperText Transfer Protocol), permettant d'envoyer des données sous la forme d'en-têtes afin d'identifier :

Le navigateur effectuant le requête ...


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LA NORME CGI

Schéma de requête d'un navigateur à un serveur Web

Pour utiliser les CGI, il faut comprendre comment se déroule la commnication entre le navigateur et le serveur lors de la demande d'une page Web.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LA NORME CGI

Schéma de requête d'un navigateur à un serveur Web (2)

Lorsqu'un navigateur effectue une requête (saisie ou clic d'une URL, ou envoi d'un formulaire), les étapes suivantes se déroulent :

Les données de requête sont envoyées au serveur sous forme d'en-têtes dans une requête HTTP.

Lorsque le serveur reçoit la requête, il analyse les en-têtes HTTP, notamment celui permettant de localiser le fichier demandé.

Si le serveur trouve le fichier HTML demandé, il va envoyer au client un en-tête de réponse valide (Success) et les données créées par l'application.

A la réception du document, le navigateur affiche le résultat à l'écran.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LA NORME CGI


Dans le cas d'un script CGI, le schéma est légèrement plus compliqué :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LA NORME CGI


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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LA NORME CGI

Envoi des en-têtes HTTP

Le serveur ne crée pas d'en-têtes pour les CGI.

Un script CGI doit commencer par envoyer un en-tête HTTP correspondant au type de fichier qu'il transmet.

Le rôle principal des CGI est de créer des pages dynamiques, l'en-tête HTTP correspondra la plupart du temps au type text/html.

Content-type : text/html\n\n

La première chaîne envoyée au navigateur est donc la suivante :

Les deux sauts de ligne sont indispensables :

Le premier sert simplement à retourner à la ligne ;

Le second sert à créer a ligne vide séparant les en-têtes HTTP du corps du message (spécification du protocole HTTP).


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


LA NORME CGI

Exemple de script CGI en Perl

Exemple de script tout simple permettant d'afficher une page web sur laquelle est écrit « Hello World »

#! /usr/local/bin/perl

print ''content-type : text/html\n\n'';print ''<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/perlprint ''location :http://www.commentcamarche.net'';


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


Install & Config d'un Site Web

Installation &

Configurationd'un Site Web


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Installation de

WampServer2sous Windows


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Introduction à WAMP

Wamp Server 2 est la nouvelle version de WAMP5.Wamp Server 2.0i est composé de Apache 2.2.11, MySQL 5.1.36, PHP 5.3.0.

WampServer est une plate-forme de développement Web sous Windows. Il vous permet de développer des applications Web dynamiques à l'aide du serveur Apache2, du langage de scripts PHP et d'une base de données MySQL. Il possède également PHPMyAdmin et SQLite Manager pour gérer plus facilement vos bases de données.

Nous allons voir comment installer Wamp server 2.0i en français.

http://www.wampserver.com/download.php

Lien pour téléchager Wamp server.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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" :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Installer WampServer 2.0 (2)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010




Cliquez sur "Next" pour débuter réellement l'installation de Wamp server 2 :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010




Lisez puis validez la licence du logiciel, en sélectionnant "I accept the agreement", puis cliquez sur "Next" :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010




Sélectionnez un emplacement dans lequel vous souhaitez installer Wamp, ou laissez celui qui est proposé par défaut, puis cliquez sur "Next" :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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" :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Installer WampServer 2.0 (7) Enfin, cliquez sur "Install" :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Installer WampServer 2.0 (10) Le programme de configuration de Wamp vous demandera alors des précisions concernant le serveur SMTP que vous

souhaitez utiliser. Ceci est nouveau dans Wamp, et permet de spécifier le nom du serveur smtp qui sera utilisé pour l'envoi

des mails par la fonction mail() de PHP. Si vous avez un serveur mail capable d'envoyer des mails sur votre PC, vous pouvez mettre son nom (localhost..). Sinon,

en règle générale, vous pouvez utiliser le serveur SMTP de votre fournisseur d'accès internet. Ici smtp.free.fr par exemple. Puis entrez votre adresse email, c'est l'adresse email de l'expéditeur qui apparaitra dans les emails envoyés, lorsque celle-ci n'est pas spécifiée dans vos scripts.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010




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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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" :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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 :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Test de WampServer 2.0

Vous pouvez désormais ouvrir votre navigateur internet, ouvrir l'adresse url "http://localhost". Si les services de Wamp sont bien lancés, vous devriez avoir la page d'accueil suivante :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Présentations desfichiers de

configurations


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Serveur Apache

httpd.conf

Apache error log

Apache access log


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Serveur Apache - httpd.conf

Ce fichier se trouve

dans le répertoire suivant


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Serveur Apache – httpd.conf (2)

Il existe plein d'information sur internet concernant les directives de configuration de ce fichier.

http://www.linux-kheops.com/doc/redhat72/rhl-rg-fr-7.2/s1-apache-config.html

Exemple de lien concernant les directives de configuration de ce fichier.

Ce fichier contient les directives propres au fonctionnement du serveur lui-même.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Serveur Apache - access.log




Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Serveur Apache – access.log (2)

Ce fichier contient les informations concernant les accès à votre serveur.

Chaque ligne est par défaut de la forme :

127.0.0.1 - - [30/May/1998:17:27:15 +0200] "GET /page1.shtml HTTP/1.0" 200 664

Les différents champs indiquent respectivement la provenance de la connexion, la date et l'heure de la connexion, la page vue et le code de lecture ainsi que la taille du fichier lu.

Chaque ligne est appelée un hit et pour peu qu'une page html contienne 10 images, le fichiers logs contiendra 11 lignes relatives à l'envoi de cette page, ce qui fait souvent confondre le nombre de lecteurs et le nombre de connexions.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Serveur Apache - error.log




Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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 ;


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Pour php

php.ini

PHP error log


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Pour php – fichier de configuration php.ini




Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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"


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010




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).


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010




Après avoir modifié la configuration de PHP dans son fichier php.ini, vous devrez redémarrer le serveur web pour que vos modifications soient prises en compte (à supposé, bien sûr, que vous utilisez PHP via le serveur web). Si vous utilisez PHP par la ligne de commande, le fichier de configuration sera lu chaque fois que vous appelez le programme binaire PHP.

Pour en savoir plus sur le fichier php.ini

http://php.net/manual/fr/ini.core.php

http://www.php.documentation.givah.net/?p=ini.html


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Configurationd'un

site Web minima


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Configuration d'un site Web

DEMO


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Lancementdu site dans le

navigateur


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Lancement du site dans le navigateur


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


Install & Config d'un serveur FTP

Installation et configurationd'un serveur

FTP


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Rôle d'un serveur FTP

Un serveur FTP (File Transfer Protocole) est utilisé dans le cas où l'on souhaite rendre disponible des fichiers (dans un réseau local ou sur internet) et ce que ce soit de manière anonyme ou grâce à des comptes utilisateurs.L'échange des fichiers peut se faire dans les 2 sens, soit en téléchargement à partir du serveur ftp (download) vers l'utilisateur (client) ou soit dans le sens contraire, en téléchargement à partir de l'utilisateur vers le serveur ftp (upload).

Le serveur ftp pour l'installation et la configuration se nomme FileZilla Server (license open source1 et par ailleurs gratuit), il est disponible sur la page du projet FileZilla.

La version actuellement est là : 0.9.34


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Installation du serveur FTP

Téléchargement de la version sur le site http://www.01net.com/


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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).


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010




L'écran suivant vous demande le répertoire de destination (Dossier d'installation) de l'application.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010




Ici, nous arrivons à la partie qui va nous permettre de choisir si l'on veut installer notre serveur FTP en tant que service.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010




Détaillons les différentes options disponibles :Installer comme un service, démarré avec Windows (défaut) :

➔ Le serveur ftp est installé en tant que service et démarre en même temps que Windows (c'est l'option par défaut). Utile si votre serveur ftp doit tourner de façon ininterrompue sans pour autant être relancé par une personne à chaque fois que la machine redémarre.

Installer comme un service, démarré manuellement :

➔ Le serveur ftp est installé en tant que service mais démarre manuellement (grâce au raccourci adéquate dans le menu de FileZilla Server). Utile si vous pensez utiliser votre serveur ftp de façon occassionnel.

Ne pas installer comme un service, démarrage manuel (non recommandé) :

➔ Le serveur ftp n'est pas installé en tant que service et démarre de manière manuel. L'option qui pourrait être utilisée si vous n'êtes pas sous un environnement XP ou 2000 mais que vous souhaitez avoir un serveur ftp.

Le port (par défaut) utilisé pour l'administration du serveur ftp est 14147, bien entendu vous pouvez le changer pour répondre à vos besoins, le port dans ce cas doit être compris entre 1 et 65535. Par ailleurs, il faudra faire attention à ne pas allouer un port qui serait déjà utilisé, exemple: 80 (si vous possédez un serveur web sur la machine cela conduira à des problèmes).


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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 vousn'avez pas plusieurs serveurs ftp à administrer.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Configuration du serveur FTPSi tout c'est bien passé, l'écran suivant doit être affiché :

Ceci estl'interfaced'admindu serveurFTP


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Accès au serveur FTPDeux moyens pour accèder au serveur FTP, soit par le client FileZilla, soit par un navigateur Web.

Client FileZilla


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Accès au serveur FTP – Navigateur Web


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


Fonctionnement Site Web / Navigateur

LE NAVIGATEUR WEB

Principe de fonctionnement


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Principe de fonctionnementLe 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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


Intéraction avec le Navigateur

Comment le site Web interagit

avec le Navigateur


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


Intéraction avec le Navigateur

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).


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


Intéraction avec le Navigateur (2)

Communication entre navigateur et serveur

La communication entre le navigateur et le serveur se fait en deux temps.

Le navigateur effectue une requête HTTP

Le serveur traite la requête puis envoie une réponse HTTP


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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>..EN-TÊTE : Valeur<crlf>Ligne vide<crlf>CORPS DE LA REQUÊTE

Exemple :GET http://www.commentcamarche.net HTTP/1.0Accept : text/htmlUser-Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows XP)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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>..EN-TÊTE : Valeur<crlf>Ligne vide<crlf>CORPS DE LA REPONSE

Exemple :HTTP/1.0 200 OKDate : Sat, 21 Aout 2010 14:38:12 GMT Server : Microsoft-IIS/2.0Content-Type : text/htmlContent-Length : 1245Last-Modified : Fri, 20 Aout 2010 09:23:12 GMT


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


Site Internet / Intranet

Fonctionnement d'un site

Internet / Intranet


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


Site Internet / Intranet

Fonctionnement d'un site Internet / Intranet Un site Internet et un site Intranet fonctionnent selon un principe

similaire. Dans les deux cas, une machine dédiée à la distribution de pages Web et de documents liées est pilotée par un logiciel spécial appelé « logiciel Serveur Web ».

Ce serveur possède une adresse IP pour être joignable sur le réseau et généralement un nom est associé à cette adresse pour retrouver ce serveur plus facilement. La relation entre l'adresse IP et le nom sera fait par un logiciel spécifique : le serveur DNS (Domaine Name Server).

Tout fournisseur d'accès Internet (F.A.I) met un tel serveur à disposition de ses clients.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


Site Internet / Intranet (1)

Accès au serveur depuis Internet Nous voulons accéder au site www.bidule.com. Pour cela, l'adresse en question est tapée

dans la barre d'adresse du navigateur. Lors de la validation, la machine va se connecter au F.A.I et demander à son serveur DNS quelle est l'adresse correspondante à ce site.

Le serveur DNS du F.A.I indique à notre machine que www.bidule.com possède l'adresse IP 194.254.2.250. A ce moment, le navigateur affiche en général qu'il a trouvé le site et commence à lancer une recherche sur Internet avec cette adresse.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Accès au serveur depuis Internet (2) De proche en proche, la demande va transiter jusqu'à atteindre le serveur.

Le serveur 194.254.2.250 a reçu notre demande et met en action son logiciel serveur web. Celui-çi va examiner la demande et chercher si nous avons demandé une page en particulier. Si ce n'est pas le cas, le serveur web va renvoyer la page par défaut, en général index.htm (ou index.html ou index.php).


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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).


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Fonctionnement Serveur de messagerie (2)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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).


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Connecter son entreprise – Accès vers l'extérieur : Routeur

Routeur noyau

Routeur externe

Routeur interne

Réseauautonome

Réseauautonome


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Connecter son entreprise – Contrôler les accès depuis ou vers l'extérieur : pare-feu windows


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Connecter son entreprise – Contrôler les accès depuis ou vers l'extérieur : pare-feu windows


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Fonctionnement d'un Intranet - Présentation

De clients (navigateur Internet généralement) ;

D'un ou plusieurs serveurs d'application: un serveur Web permettant d'interpréter des scripts PHP, ASP ou autres, et les traduire en requêtes SQL afin d'interroger une base de données ;

d'un serveur base de données.

Un Intranet est un ensemble de services Internet (par exemple un serveur Web) internes à un réseau local, c'est-à-dire accessibles uniquement à partir des postes d'un réseau local, ou bien d'un ensemble de réseaux bien définis, et invisible de l'extérieur. Il consiste à utiliser les standards client-serveur de l'Internet, pour réaliser un système d'information interne à une organisation ou une entreprise.

Un intranet repose généralement sur une répartition, composée :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Intranet – site externe protégé (avec mot de passe)

On pourra ensuite se déconnecter


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Intranet – site interne protégé (sans mot de passe)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Intranet - Accès

Nom d'utilisateur (login)

Mot de passe

Un Intranet dans une entreprise permet de mettre facilement à la disposition des employés des documents divers et variés; cela permet d'avoir un accès centralisé et cohérent à la mémoire de l'entreprise, on parle ainsi de capitalisation de connaissances.

De cette façon, il est généralement nécessaire de définir des droits d'accès pour les utilisateurs de l'intranet aux documents présents sur celui-ci, et par conséquent une authentification de celui-ci afin de leur permettre un accès personnalisé à certains documents.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Intranet – Les services

Mise à disposition d'informations sur l'entreprise (panneau d'affichage)

Un Intranet peut rendre les services suivants :

De cette façon un intranet favorise la communication au sein de l'entreprise et limite les erreurs dues à la mauvaise circulation d'une information.

Mise à disposition de documents techniques

Moteur de recherche de documentations

Un échange de données entre collaborateurs

Annuaire du personnel

Gestion de projets, agenda, aide à la décision

Messagerie éléctronique

Forums de discussion, listes de diffusions, chat en direct

Portail vers Internet

L'information disponible sur l'intranet doit être mise à jour en évitant les conflits de version.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Fonctionnement d'un Extranet – Accès depuis l'extérieur

Authentification simple (nom d'utilisateur et mot de passe)

Extension du système d'information de l'entreprise à des partenaires situés au -delà du réseau.

L'accès à l'Extranet doit être sécurisé dans la mesure où cela offre un accès au système d'information à des personnes situées en dehors de l'entreprise.

Authentification forte (authentification à l'aide d'un script)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


Conception & Réalisation

Conception &

Réalisation de pages Web


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Notiond'hypertexte

& d'hypermédia


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Hyperlien = Références entre documents

Navigation d'un document à un l'autre


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Hypertexte enrichi du Multimédia

Images, Sons, Vidéos, Animations contenant des zones sensibles (boutons,...)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



LE LANGAGEHTML


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



HTML – HyperText Markup Language

Hypertexte → lien dans un document pointe vers autre document

Markup Language → code pour marquer des zones dans un document

Né en 1989 au CERN (Organisation européenne pour la Recherche nucléaire) basé sur SGML (Standard Generalized Markup Language)

Spécifié par le W3C (World Wide Web Consortium)

http://www.w3.org/TR/html4/


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Langage de Description de Documents HyperTextuels

Edition manuelle possible Génération de documents par programmation (CGI,Perl)

Structuration hiérarchique à la SGML

Description textuelle du Document

Apparation d'outils WYSIWYG (FrontPage, DreamWeaver,...)

Elément HTML décrit par balisage (tag) du texte <ELEMENT ATTR=VALUE> … </ELEMENT>

Il existe une DTD (Définition de Type de Document) publique HTML


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Fonctionne sous la base de la balise (ou tag)

Ex: <html>, <p>, <table>

<p>Ceci est un paragraphe.</p>

Une balise formate le document en entier ou une partie du texte

Principe du HTML

A chaque balise correspond une balise fermante, ce qui limite l'effet de balise

Les retours de chariot ou les espaces blancs ne sont pas pris en compte


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Un document HTML peut être édité

Dans un simple éditeur de texte

A l'aide d'éditeurs plus ou moins sophistiqués (grand choix sur @)

Principe du HTML (2)

Nombreux éditeurs shareware ou freeware sont disponibles

Généré par un traitemente de texte (« Sauver sous... », mais le code n'est pas très bon)

Exemples d'éditeurs :

- Adobe Dreamweaver : http://www.adobe.com/fr/products/dreamweaver

- Microsoft expression (Frontpage) : http://www.microsoft.com/france/expression/default.aspx


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Premier exemple de document HTML


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Le document à l'extension .html ou htm

C'est cette page qui est affichée par défaut si rien n'est spécifié

Fichier HTML

Simple texte → facile à modifier

Exemples dans notre site minima :

- http://localhost/monsite/

- http://localhost/monsite/index.html

La page principale dans un répertoire se nomme index.htm(l), (parfois aussi welcome.htm(l) ou default.htm(l))

Equivalent de :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Structure générale d'un document HTML


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les balises sont emboîtées

<p>Ceci est un paragraphe avec un mot <b>en gras</b>.</p>

Les balises

Balise non sensibles à la casse : <b> = <B>, <b> </B> toléré

<html> </html> marque début et fin d'un document

Une balise peut avoir des attributs

<p align=''center''>Paragraphe centré</p>

<head> marque l'en-tête du document

<body> marque le corps du document Balisesobligatoires


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Structure d'un document HTML


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



<title> marque le titre du document

Apparaît dans la barre de titre du navigateur et utilisé pour les signets (bookmarks)

Entête d'un document HTML - <head>...</head>

<meta> contient la méta-information

Attention: n'apparaît dans le corps du texte

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> contient le code de caractère utilisé par le document , assez important


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Caractères accentués et spéciaux

Exemples :

a < b if c>d a < b if c>d a < b if c>d


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Caractères accentués et spéciaux (2)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Description du document

Faciliter l'indexation

La balise META

Metadata de HEAD décrivant le document

Faciliter la sélection des documents

<META NAME=''cle'' CONTENT=''valeur''>

<meta NAME=''keywords'' CONTENT=''computer,center,home,menu, ...''>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Exemple de la balise META (2)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Couleurs

Code RGB = Red Green Blue

Signe # 6 chiffres hexas, 2 digits par couleur

#000000 = noir (ou utiliser ''black'') #ffffff = blanc = white #ff0000 = rouge = red #0000ff = bleu = blue

Autre notation possible

...

rgb (rouge[0-255], vert[0-255], bleu[0-255])

Exemples :

rgb(255,0,0) = #ff0000 = rouge


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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...)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les titres - Exemple


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Formatage du texte

<sup> pour mise en exposant

<sub> pour indices

<b> pour gras (bold)

<i> pour italiques

<big> pour texte plus grand

<u> pour souligné (underline)

<small> pour texte plus petit

<strikel> et <s> pour barré


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les commentaires


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Police et taille du texte


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Police et taille du texte - Exemples


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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'', ...


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Listes


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Listes (2)

Plusieurs niveaux emboîtables, types de liste également (indentation des niveaux juste pour clarté visuelle)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Listes (3) - Exemple


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Listes de définitions

Ouverture d'une liste <dl> Terme à définir <dt> Définitions <dd>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Listes de définitions - Exemple


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



URL (Uniform Ressource Locator) URL absolue

Format d'une URL pour HTTP, FTP

protocole://dnsmachine:port/rep/fic#target


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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

<a href=''http://localhost/monsite/contact.html target=''_blank''> la page contact </a>

Exemple :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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

http://132.203.82.194:80

Exemple :

http://geosoa.scg.uparis.ca:8080


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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| ... ''


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les images (2) - Exemple


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les balises DIV et SPAN – Exemple 1


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les balises DIV et SPAN – Exemple 2


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les tableaux - Exemple


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Alignement des cellules

Dans <tr> → alignement pour toute la ligne

Dans <td> <th> → alignement pour une cellule

Alignement horizontal alignleft, center, right, justifyalign=''char'' char=''.'' → valeur numérique, alignement sur point

Alignement vertical valign top, middle, bottombaseline tous les contenus alignés sur la même ligne de base


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les tableaux – Exemple récapitulatif


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



LES FEUILLES DE STYLES

CSSCascading Style Sheets


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Trois niveaux de CSS

CSS Level 1, CSS Positionning, CSS 2

Cascading Style Sheets CSS 2.1 pour HTML et XML

http://www.w3.org/TR/CSS21/ Nouvelle spécification en cours : CSS 3

Support de CSS par les navigateurs IE 6, 7, 8 Firefox x.x Opera 10.6x Safari 5.x


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Feuille de style interne

Feuille de style externe

Incorporation de CSS dans HTML


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Feuille de style en ligne

Feuille de style importé

Incorporation de CSS dans HTML (2)

Balises non concernées par l'application de styles : BASE,BASEFONT,HEAD,HTML,META,SCRIPT,STYLE.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Définition de styles externes et cascadés


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les balises SPAN et DIV

Appliquer des styles à des paragraphes ou des morceaux de paragraphes

La balise SPANPermet de modifier des morceaux de paragraphes

<SPAN class=Nom_de_la_classe> Texte </SPAN>

La balise DIVPermet de modifier des blocs de paragraphes

<DIV class=important> Paragraphes </DIV>

Exemple :

Vous constatez que ce texte n'est pas totalement en vert.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Styles en cascade (2) - Exemple


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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''>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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 '';''


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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 }


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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 }


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les classes Définition de classes pour appliquer des styles différents aux

même balises

Une classeDé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 universelleDé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>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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 : ' « ' ' »' }


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



La pseudo-classe descendante Appliquer un style à la première balise au sein d'un élément en

utilisant le symbole ''>'' et la pseudo-classe :first-child Exemple : p > A:first-child {color: #00FF00; }

Les pseudo-classes de page Le sélecteur @page permet de modifier la mise en page d'une

page HTML 3 pseudo-classes : :left (les pages de gauche), :right (les pages

de droite), et :first (la première page) Exemple : @page:right { size:landscape; margin-left: é.5cm; }

Les pseudo-classes de texte Appliquer un style à une partie d'un texte délimité par (<P>) 2 pseudo-classes : :first-line (la première ligne du texte) et :first-

letter (la première lettre du texte) Exemple : P:first-letter {font-size: 200%; font-weight: bold; }


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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

Les unités


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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 }

Les couleurs – différentes façons pour définir

Un code RGB en notation décimal Proportion relative en % ou en notation entière absolue

(entre 0 et 255) rgb (100%, 100%, 100%) / rgb (24,125,255)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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

Le positionnement


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Exemple 2 : positionnement d'une image

Le positionnement (2)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Pour les polices de caractères font-family: arial; font-size: x-large; font-style: bold

Quelques propriétés

Pour les textes et les paragraphes text-align: center; color: red; text-indent: 5px, width: 640, height: 480;

Pour les couleurs et l'arrière plan background-color: yellow; background-position: left;

Pour les bordures border-left-color: #0000FF; border-top-width: 3pt;

Pour les tableaux border-spacing: 4px; caption-side: top; table-layout: fixed;

Pour les listes List-style-type: circle; list-style-position: inside;


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



DOM&

SCRIPT (JS)Côté client


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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 compositeUn 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 arbreChaque 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)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Document Object Model (2)

Document représenté sous forme d'arbre → notion de hiérarchie (mère/enfant, précédence, etc ...)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Document Object Model (3)

DOM Level 1Accès et manipulation de la structure d'un document XML ou HTML

http://www.w3.org/TR/REC-DOM-Level-1 (Specification)

DOM Level 2

CSS, Range, Filtres et Itérateurs, Evénements utilisateur et de transformation, Namespaces

http://www.w3.org/TR/WD-DOM-Level-2 (Core Specification)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Script côté client

But : moins d'intervention du serveur WWWGénération dynamique de documents HTML par le navigateurContrôle des formulaires HTML par le navigateurContrô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>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Script côté client (2)

FonctionnalitésReprésentation OBJET des éléments du document

layer, form, input, img, …manipulation des caractèristiques de ces élémentsremarque : précurseur à DOM

Programmation événementiellerendre 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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



INTRODUCTIONÀ

PHP


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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).


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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é)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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, ...


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Présentation – Exemple


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



La syntaxe de base (2)

<?php If ($expression){

?><strong>Ceci est vrai.</strong>

<?php}else{

?><strong>Ceci est vrai.</strong>

<?php}

?>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010




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 ?>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010




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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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 impliqueautomatiquement un point-virgule. Il est recommandé de systématiquement terminer vos intructions par un point-virgule.

<? phpecho 'ceci est un test';

?>

<? php echo 'ceci est un test' ?>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Commentaires

PHP supporte les commentaires 'C', 'C++' et Unix shell -style

<? phpecho '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

?>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les types


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les types (2)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les types (3)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les types (4)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les types (5)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les types (6)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les types (7)

Les nombres décimauxLes 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;

?>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les types (8)

Les chaines de caractèresLes 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 simplesguillemets 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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les types (9)Les chaines de caractères

Guillements simplesLe moyen le plus simple de spécifier une chaîne de caractères est d'utiliser les guillemets simples : '.Pour spécifier un guillemet simple littéral, vous devez l'échapper avec un anti-slash (\).Contrairement aux autres syntaxes, les variables présentes dans la chaîne ne seront pas remplacés par leurs valeurs.

Guillements simplesSi 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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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']; //vieuxecho $arr[12]; //1

?>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les variables

En PHP, les variables sont représentées par un signe dollar ''$'' suivi du nom de la variable

Le nom est sensible à la casse. $x != $X

Assignation simple$a=10;$b=$a;

Assignation par référence$a=10;$b=&$a;


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les variables (2)

Les variables prédéfiniesPHP 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 variablesLa portée d'une variable dépend du contexte dans lequel la variable est définieLorsque vous définissez une fonction, la portée d'une variable définie dans cette fonction est locale à la fonction


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Les variables (3)

Exemple 1Fichier 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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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''


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



GESTIONSDES

FORMULAIRES


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Pour interaction avec l'utilisateur

Les formulaires

Programme sur le serveur (ou script JavaScript) → retourne une page de résultats

Formulaires → forum, contact, QCM, moteur de recherche, etc ...

Script CGI → programme sur le serveur qui traite des données


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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

La balise <form>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



A inclure dans <form>

Les champs (contrôles)

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


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



<input name=''xx'' type=''checkbox'' value=''yy'' />

Les cases à cocher et boutons radio

checked=''checked'' optionnelplusieurs contrôles avec même nom possible mais avec la même valeurn'est envoyé au CGI qui si sélectionne

<input name=''xx'' type=''radio'' value=''yy'' />plusieurs valeurs nécessaires avec même nomchecked=''checked'' optionnel mais recommandé (1er de la série par défaut)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Envoi du formulaire <input type=''submit'' value=''Envoyer''>

Les boutons

name optionnel, envoye le contenu de value

Autres boutons <input type=''button'' value=''Effacer ...'' onclick='''' />

nécessaire de définir une action javascript

Effacement <input type=''reset'' value=''Effacer ...''>

Image équivalent à submit <input type=''image'' src='''' alt=''''>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Valeurs à transmettre que l'utilisateur n'a pas besoin/droit de modifier

Soumettre des valeurs cachées

<input type=''hidden'' name=''xx'' value=''yyy''>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Pour sélectionner valeur (=ComboBox) <select>name=''''size='''' nombre d'éléments visibles en même tempsmultiple=''multiple'' sélection multiple possible

Les sélecteurs de liste

<option> inclut les options possibles value='''' valeur à transmettre (si absent, envoie la valeur incluse dans option <selection>selected=''selected'' → valeur par défaut

Exemple :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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

Les champs textes multilignes

<textarea name=''Comment''> Ce texte est affiché dans le formulaire<textarea>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Exemples de formumaires


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Exemples de formumaires (2)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



LES BASESDE DONNEES

ET LE WEB


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Site Internet dynamique – Principe de fonctionnement

Envoi d’une requête depuis une page web

Ex: variables dans un formulaire

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>


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Qu'est-ce qu'une page dynamique (2)On reconnaît facilement un page dynamique grâce à l'URL qui s'affiche dans le navigateur web de l'utilisateur :

• page statique: http://www.monsite.be/accueil.htm: affiche la page accueil.htm, stockée telle quelle sur le serveur,

• page dynamique: http://www.monsite.be/accueil.php?langue=fr:affiche la page accueil.php en demandant au serveur d'afficher le contenu de cette page en français.

Alors que les pages statiques font appel au html, langage de description de données, les pages dynamiques sont mises en oeuvre grâce à un langage de programmation. Grâce à lui, on pourra disposer d'instructions conditionnelles, de boucles et de fonctions de traitement complexes. Le langage de programmation variera en fonction de la technologie retenue (PHP, ASP, Java, etc.).


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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 :


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


TP & Mise en pratique

TP &

Mise en pratique


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Editeurs HTML


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Editeurs HTML (2)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



Mise en place de la structure du site (2)

Exemple de design pour les pages


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010



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.


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


Questions & Réponses

Questions &

Réponses


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


REFERENCES

Références


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


REFERENCE PHP

Langage PHP

Site officiel: http://www.php.net

Ouvrage de référence:

Leon Atkinson,‘Core PHP Programming’, Prentice Hall PTR


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


REFERENCE MySQL

Site officiel: http://www.mysql.com

Bases de données MySQL

Ouvrage de référence:

Paul DuBois,‘MySQL’, CampusPress (collection ‘Référence’)


Pari

s *

****

Du

6 a

u 7

sep

tem

bre

2010


REFERENCES DIVERS

http://www.loria.fr/~clauss/cours_php.pdf

http://www.w3.org/Style/Examples/011/firstcss.fr.html

http://www.w3.org/TR/REC-html40/

http://dev.mysql.com/doc/refman/5.0/fr/index.html

http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html

http://g-rossolini.developpez.com/tutoriels/php/cours/

http://sylvie-vauthier.developpez.com/tutoriels/php/grand-debutant/