Exercices pour apprendre le developpement web par pratique

Généralités

•    Qu’est-ce que le Web (ou World Wide Web, Toile, WWW, W3)? 

 Système hypertexte public : système contenant des documents liés entre eux par des hyperliens  permettant de passer automatiquement d’un document à l’autre.

•    Différence entre le Web et Internet?         Web : un aspect d’Internet

 Internet : réseau mondial d’ordinateurs permettant aux utilisateurs de communiquer (courrier électronique), de publier des informations (Web), de transférer des données (FTP), de travailler à distance (telnet et ssh)  

Architecture distribuée

Le client (navigateur : Internet Explorer, Mozilla, Firefox. . .)

•  demande au serveur des informations

•  affiche des pages pour l’utilisateur

Le serveur (Apache, Microsoft IIS. . .)

•  reçoit en permanence les requêtes du client

•  renvoie les documents correspondants

Le réseau Internet

•  basé sur le protocole TCP/IP

•  chaque machine dispose d’un numéro IP et d’un nom associé grâce aux serveurs de nom du domaine (DNS) Exemple

•  Nom de machine

•  Adresse IP 129.175.250.38

HTTP

Protocole : Ensemble normalisé de règles décrivant la manière de transmettre des informations, par exemple sur un réseau comme Internet entre un client et un serveur.

HTTP : HyperText Transfer Protocol, le plus utilisé des protocoles de communication sur le World Wide Web.  Permet à un client Web d’indiquer quelle page il veut obtenir, et au serveur Web de lui répondre en lui donnant cette page.

Les URL

•   URL : Uniform Resource Locator

•   Identifie l’endroit où se trouve une ressource sur le Web.

•   Dans le cas du Web, ressource = document ou fragment

•   h t t p : / / l e a - l i n u x . o r g / r e s e a u / s e c u / f i r e w a l l . h t m l # i n t r o     protocole         machine                répertoire       fichier                   fragment

•   Principaux protocoles utilisés dans les URL : ftp, http, https, news, nntp, mailto, telnet, etc.

Clients Web

•    Navigateurs graphiques

 Internet Explorer

 Moteur Gecko : Firefox, Mozilla, Camino, SeaMonkey (libres)  Opera (gratuit)

 Moteur KHTML : Konqueror (libre), Safari (navigateur d'Apple)

•    Navigateurs textuels : w3m, lynx, links (libres)

•    Autres navigateurs : Navigateurs auditifs, etc.

•    Mais aussi : Robots des moteurs de recherche, logiciels de traduction automatique. . .

Vocabulaire

•    Un serveur Web : hôte sur lequel fonctionne un serveur HTTP. Il héberge les ressources qu’il sert.

•    Un navigateur Web : logiciel client HTTP conçu pour accéder aux ressources du Web. Sa fonction de base est de permettre la consultation des documents HTML disponibles sur les serveurs HTTP.

•    Une page Web : document destiné à être consulté avec un navigateur Web. Elle est constituée d’une ressource centrale et d’éventuelles ressources liées automatiquement.

•    Un site Web : ensemble de pages Web et d’éventuelles autres ressources, liées dans une structure cohérente, publiées par un propriétaire (une entreprise, une administration, une association, un particulier, etc.) et hébergées sur un ou plusieurs serveurs Web.

•    Un hébergeur Web : entreprise de services informatiques hébergeant (mettant en ligne) sur ses serveurs Web les ressources constituant les sites Web de ses clients.

•    Hyperlien : lien logique, unidirectionnel (codé par une balise HTML) reliant une page Web à une autre.

•    Surfer, Naviguer : parcourir le Web en suivant les hyperliens, de page Web en page Web.

Modèle

PHP

Le PHP est un langage de script, gratuit, interprété et exécuté côté serveur, le PHP (Personal Home Page ou Hypertext Pre Processor selon les sources) a été mis point en 1994 par Rasmus Lerdorf. C’est une application gratuite issue du domaine des logiciels libres. Il permet de plus: 

•    de générer des pages HTML ou d'autres types de fichiers (XML, CSV, PDF, et même des images Gif, Jpeg, PNG ). 

•    d’interroger des bases de données 

•    de rendre dynamiques les pages web, c'est-à-dire de les réaliser à la volée en fonction de la demande de l’utilisateur.

C'est un langage côté serveur : c'est donc la machine qui héberge le site web qui va exécuter le PHP, et non la machine ou le navigateur du visiteur.

C'est un langage interprété : les instructions sont traitées directement par le serveur (pas de compilation) C'est une application open source : chacun a le droit d'utiliser, d'étudier, de modifier, de dupliquer, de donner et de vendre cette application sans contrepartie.

Fonctionnement

Il s’agit d’une application du domaine client/serveur. Le navigateur est le client et le serveur est le moteur php qui est actif sur le serveur web. L’interpréteur php crée la page au moment où elle est demandée et envoie les données au navigateur qui n’a plus qu’à les afficher. Le code n’est donc pas visible dans le navigateur ce qui peut présenter un avantage certain du point de vue de la sécurité. 

•    l'internaute tape l'adresse réticulaire (URL) d'une page contenant du PHP dans son navigateur

•    le navigateur envoie l'adresse que vous avez tapée au serveur web

•    le serveur web recherche le fichier correspondant et, s'il porte bien une extension reconnue comme une application PHP, transmet ce fichier à l'interpréteur PHP

•    l'interpréteur PHP analyse le code PHP et exécute ce qui se trouve entre les balises <?php et ?> si ce code contient des requêtes vers une base de données MySQL, PHP envoie la requête SQL au serveur de base de données 

•    la base de données renvoie les informations voulues au script qui peut les exploiter (pour les afficher par exemple). 

•    PHP retourne le fichier dépourvu du code PHP au serveur web 

•    le serveur web renvoie un fichier contenant seulement du HTML au navigateur qui l'interprète et    l'affiche; PHP s'exécute donc du coté serveur.

image issue du site

Exemple de script

EasyPhp

EasyPHP est un package WAMP, une plateforme de développement Web, servant à faire fonctionner localement (sans se connecter à un serveur externe) des scripts PHP. EasyPHP n'est pas en soi un logiciel, mais un environnement comprenant deux serveurs (un serveur web Apache et un serveur de bases de données MySQL), un interpréteur de script (PHP), ainsi qu'une administration SQL PhpMyAdmin. Il dispose d'une interface d'administration servant à gérer les alias (dossiers virtuels disponibles sous Apache), et le démarrage/arrêt des serveurs. Il permet par conséquent d'installer en une seule fois tout l'indispensable au développement local du PHP. Par défaut, le serveur Apache crée un nom de domaine virtuel (en local) http ://127.0.0.1 ou http ://localhost. Ainsi, lorsque on choisit "Web local" dans le menu d'EasyPHP, le navigateur s'ouvre sur cette URL et affiche la page index. php de ce site qui correspond en fait au contenu du dossier www d'EasyPHP.  EasyPHP est parfois utilisé comme une application portable, c'est-à-dire lancé sur une clé USB.

Lancement de EasyPHP

Avant d'ouvrir l'Administration ou le Web local, vérifier qu' est déjà lancé. Dans le cas contraire, on doit le lancer :

1.    Cliquer sur le bouton « Démarrer »

2.    Cliquer sur « Programmes »

3.    Cliquer sur le groupe « EasyPHP »

4.    Cliquer sur  « EasyPHP »

Constatation :

Si votre serveur PHP est bien lancé, il affiche une icône à coté de l’horloge avec un clignotement d’un indicateur de couleur Rouge.         

Pour explorer les fonctionnalités d’EasyPHP, placer le pointeur sur l’icône EasyPHP et cliquer sur le bouton droit de la souris. Un menu contextuel apparaît .

Administration et exploration de EasyPHP

Pour explorer les sites Web locaux, on peut cliquer sur l’option « WebLocal » du menu contextuel. Une page Web s ‘affiche : 

Pour administrer EasyPHP, on doit cliquer sur l’option « Administration » (Menu contextuel ). Une page Web s’affiche : 

Cette page vous permet entre autre de gérer vos bases de données et d'administrer vos alias Web local et aussi de visualiser vos pages web locales.

Configuration Apache

Pour paramétrer votre serveur Apache, utilisez un éditeur de texte et ouvrez le fichier situé dans le répertoire c:\easyphp\apache\conf sauf si vous avez changé le répertoire d'installation. A la ligne DocumentRoot "indiquez l'adresse de votre site"

Exemple : DocumentRoot "C:\site"

Pour vérifier que l'ensemble est opérationnel, tapez dans la barre d’adresse de votre navigateur l'URL : http://localhost/

Choisir un éditeur pour PHP

Parmi les outils utilisés, on peut citer : • Notepad++

•    UltraEdit : simple et efficace, avec une coloration syntaxique.

•    Dreamweaver, solution idéale qui présente beaucoup d’avantages : La coloration syntaxique, le client FTP intégré, les outils d’organisation et de documentation du site, l’aide à la rédaction du code HTML, etc.

•    PHP Expert Editor

•    Web Expert.