Cours Internet
D .Mailliet
Cours Internet ..1
Cours Internet ..7
III. Html .. 13
Mon titre en H1 .. 33
Mon titre en H2 . 33
Mon titre en H3 33
Mon titre en H4 .. 33
Voici du gras . 33
Voici de l'italique 33 voici du texte en police monospace 33 voici du texte souligné . 33 Voici un exemple de textepartiellement en italique, en gras et souligné .. 33
Mise en évidence simple .. 34
Plus d'emphase 34
Pour faire une citation . 34
Le résultat d'un programme .. 34
ceci est une variable 34 Du code .34 Une touche du clavier ..34
..34 avec un retour à la ligne et une ligne vierge 34
Votre paragraphe est au centre 34
..38
38
..39 3. Les listes
et
.39
42 2. Les cellules d'un tableau ..42 a) Les titres ..42
Blur() ; focus() ; click(); submit(); etc 63 Dans l’exemple suivant on simule l’action de l’utilisateur qui consiste à placer le focus sur le champ mdp .63
Dans les 2 exemples suivants on envoie automatiquement le formulaire ci-dessus ..64
VII. Php ..76
Le nom des variables est sensible à la casse (ie : $x != $X). ..77
Et pour la lecture 96
On voit ci-dessus les différentes bases que l’on peut développer en cliquant sur le + et découvrir les tables qui la compose
.. 98 CREATE DATABASE `calrep`; .. 101
Soit par un copier/coller des lignes de 101 IX. Interfaçage PhP/MySql .. 102
Cours Internet
Votre éditeur de textes (ASCII) préféré fera l’affaire. Il est possible d’utiliser Notepad sous Windows, VI ou Kedit sous Linux. Mais les Editeurs plus évolués comme (X)Emacs ou Pfe ou scriptEdit ou encore EditPlus faciliteront la tache. Les éditeurs intégrés aux navigateurs seront aussi utilisés sans en abuser. Il permettra d’écrire les codes dans les différents langages
Internet Explorer, Netscape, Mozilla sont les plus utilisés. Ils ne réagissent pas tous exactement de la même façon. Internet Explorer n’existe que sous windows. Netscape et mozilla existent sous Windows et linux, Ils ne réagissent pas non plus exactement de la même façon sous ces 2 systèmes d’exploitation. Il conviendra donc de tester les pages créées sous les 2 systèmes d’exploitation et avec les différents navigateurs.
C’est lui qui va fournir les pages html demandées. Nous utiliserons Apache. Le rôle essentiel du serveur Http va être de fournir une arborescence pour Internet différente de l’arborescence « physique ». Par exemple sous Windows, avec easyphp installé en standard les pages http et php se trouvent en « C:\Program Files\EasyPHP\www »
A gauche : sans utiliser le serveur http. A droite : en utilisant le serveur http sur la machine locale (127.0.0.1 est l’adresse IP de la machine locale, mais cette IP peut être remplacée par celle d’une machine distante équipée d’un serveur http).
On remarque que la racine pour le serveur correspond physiquement à « C:\Program Files\EasyPHP\www » pour la machine. Et qu’il est possible de descendre dans l’arborescence sous WWW, mais qu’il n’est pas possible d’y remonter.
Il fonctionne en collaboration avec le serveur http pour traduire le code Php en Html
Il travaille en collaboration avec l’interprète Php et fournit les données extraites des tables.
a)Sous Windows
Un ensemble easyphp que l’on peut télécharger sur s’installe très facilement et contient les 2 serveurs et l’interprète.
b)Sous Linux
C’est très simple : il suffit de valider les installations des logiciels ci-dessus, ils font partie de toutes les (bonnes) distributions
Nous distinguerons 2 grandes parties :
Introduction
Html, javascript, feuille de style et applet java sont interprétés par le navigateur (récent) il est inutile d’avoir installé apache, php, mysql.
L’ HyperText Markup Language
C’est un langage de mise en forme des pages Html. Il permet de définir l’apparence d’une page : sa présentation. Il permet entre autre de gérer les alignements de textes, le gras, l’italique, les titres, la confection de tableaux et de formulaires etc.… La seule interaction avec l’utilisateur est la gestion de liens hypertexte qui permettent de passer d’une page à une autre en cliquant sur un élément de la page. Le HTML décrit la présentation d’une page à l’aide de balises entre < >
a)Les feuilles de style
Elles permettent de donner une uniformité de présentation des différentes pages d’un même « site » et de donner de la souplesse à la modification de leur présentation.
Les styles peuvent être définis dans le fichier Html ou mieux dans un fichier séparé (.css). Dans un tel fichier, on définit par exemple qu’un titre de page est en bleu sur fond jaune avec une hauteur de 18 points, que les titres de niveau 1 sont en vert et ont une hauteur de 16 points etc. L’application de cette feuille de style aux différentes pages du site lui donnera une certaine homogénéité. De plus la modification dans la feuille de style : titre de page est en rouge sur fond vert avec une hauteur de 20 points provoquera la modification dans toutes les pages sans qu’il soit nécessaire de le faire manuellement dans chaque page.
b)Le javascript
Il permet de donner une réactivité aux pages, par exemple en animant certaines parties comme le changement d’une image lorsque la souris passe sur elle, contrôle de validité de parties de formulaire comme la vérification que l’utilisateur a bien rempli certaines zones obligatoires.
Le code javascript se trouve directement dans les pages html ou dans un fichier séparé (.js) et est directement lisible. Il se trouve encadré par 2 balises
c)Les applets java
Il s’agit ici de code java (différent de javascript) compilé (.class) : il a le même objectif que javascript , mais le code est
(un peu) protégé.. Il est interprété lui aussi par le navigateur à condition que la JVM (machine virtuelle java) soit installée
(sur le client)
2.serveur(s) nécessaire(s)
a)Le Php
C’est du code mélangé au code Html, il est interprété par le serveur et est traduit en code html puis envoyé au navigateur
b)Php - MySql
Des requêtes SQL sont interprétés par Php, envoyé au serveur de SGBD pour recevoir les données correspondantes, traduites en HTML et envoyées au navigateur.
L’objet de cet enseignement n’est pas de faire de vous des experts mais de vous donner les bases pour le devenir. Nous ne verrons que les principales caractéristiques des différents langages et certainement pas toutes leurs finesses. Mais principalement l’utilité et le fonctionnement de chacun d’entre eux. Internet regorge de documentations sur le sujet. Ce polycopié est insuffisant pour traiter tous les TP et projets mais les différents sites Internet préconisés et d’autre que vous pourrez trouver pourront vous y aider.
Le fonctionnement normal nécessite n+2 machines : Les n clients, le serveur http et le serveur MySql. Bien entendu, les systèmes d’exploitation étant multi-tâches, pour les tests, une seule machine peut faire fonctionner les 2 serveurs et le(s) client(s)
On veut écrire un programme simple qui demande à l’utilisateur son prénom et qui affiche « bonjour » suivi du prénom donné : Il s’agit donc d’un programme interactif, Le Html seul ne suffit pas : nous avons le choix entre javascript et php nous allons voir les différences entre ces 2 possibilités. Voici donc le déroulement du fonctionnement
L’appui sur le bouton valider provoque l’affichage :
2.Client seul.
Seul le navigateur est primordial, le serveur est facultatif
xxx et yyy représentent soit : C:\Program Files\EasyPHP\www\pedago\ess1\ soit : (sous Windows localhost est équivalent à 127.0.0.1 – A vérifier sous Linux). Le source de « » est écrit en javascript (texte en gras) et Html (le reste non gras) :
... ... ...
Remarquons aussi:
Que aurait pu s’appeler (l) car aucun code php n’y est contenu
La nécessité de 2 « programmes » : le premier est envoyé au navigateur par le serveur, il est chargé de « poser la question » à l’utilisateur et le second est chargé de mettre en forme la réponse (stockée dans leprenom) de l’utilisateur, et qui transite ici par l’URL.
Que si l’on met comme adresse C:\Program Files\EasyPHP\www\pedago\ess1\, c'est-à-dire que l’on ne passe pas par le serveur, les programmes fonctionneront (mal) mais n’interpréteront pas la « réponse » en mettant simplement « Bonjour » non suivi du prénom puisque c’est le serveur qui est chargé de l’interprétation de la variable leprenom.
Du point de vue de l’utilisateur, le fonctionnement de et de suite .php semble identique et le résultat est le même. Il constatera une différence s’il s’en va examiner les sources. Cependant le fonctionnement est radicalement différent :
Dans le premier cas : le client demande au serveur la page (c’est l’utilisateur qui tape l’URL : http:// ) lorsque l’utilisateurappuie sur le bouton valider , c’est le navigateur qui récupère le texte tapé par l’utilisateur et affiche le résultat traité. Dans ce cas, il nous faut un navigateur évolué (capable de traiter des données et pas seulement de la mise en forme) et un serveur http minimal. Il y a une demande et une réponse.
Dans le deuxième cas : le client demande au serveur la page (c’est l’utilisateur qui tape l’URL :
http:// /tstjs.hphp) lorsque l’utilisateurappuie sur le bouton valider , le navigateur demande une nouvelle page au serveur suite .php en adjoignant à l’URL la donnée tapée par l’utilisateur et c’est le serveur qui la traite pour fournir une page Html. . Dans ce cas, il nous faut un navigateur minimal (capable de traiter de la mise en forme) et un serveur http évolué. Il y a 2 demandes et 2 réponses.
Qui fait le travail « intelligent » : le client ou le serveur ?
Si c’est le serveur, il faut en général dissocier les parties puisqu’il y a un aller entre le client (navigateur) qui reçoit les instructions de l’utilisateur et le serveur qui les traite et un retour vers le client qui les affiche et selon la complexité des échanges, cette « navette » peut se reproduire. Alors que si c’est le client, toutes les informations lui sont envoyées et c’est lui qui « choisit » de les afficher (selon les demandes).
Imaginons 3 exemples pour clarifier les choses (on ne parlera que de javascript et php, bien entendu, il comporteront tous du Html qui est l’essence même du fonctionnement http et pourquoi pas des feuilles de style) :
On demande à l’utilisateur de remplir un formulaire (comme celui ci-dessus, mais plus long que d’entrer le seul prénom) et on veut obliger celui-ci à remplir certains champs obligatoires, que la date de naissance est bien valide, que le code postal con tient bien 5 chiffres, etc.
Il est possible de faire ces vérifications avant que ce formulaire soit envoyé ; donc par le navigateur (en javascript par exemple) évitant ainsi d’envoyer un formulaire incorrect au serveur qui ferait la vérification, constaterait l’incorrection et le renverrait au client pour correction et ainsi de suite.
Dans ce cas on choisi javascript pour des questions de rapidité et d’encombrement des échanges
On veut réaliser un programme qui donne accès à certaines informations à l’utilisateur que s’il connaît un certain mot de passe. Si la réalisation est faite en javascript, et que l’utilisateur ne connaît pas ce mot de passe, des tests adaptés permettront de ne pas afficher dans le navigateur, mais il suffira d’examiner le source pour accéder aux informations puisque toutes auront été envoyées par le serveur le choix de les afficher incombant au client (navigateur). Dans ce cas, on choisira Php pour des raisons de sécurité.
On veut réaliser un programme qui permette à l’utilisateur d’entrer un code postal et d’obtenir le n om de la commune correspondante. Comme il y a en France 36 000 communes, si l’on choisit de coder en javascript, le serveur va devoir
Introduction
envoyer les 36 000 noms et codes postaux afin que le client puisse effectuer la sélection. Dans ce cas, on choisira Php pour des raisons de volumes de données (d’encombrement); il sera même intéressant de faire appel à une requête Sql pour faciliter la recherche.
J'attire seulement votre attention sur la notion de casse, c'est-à-dire le respect des majuscules et minuscules. En effet, lorsque vous vous trouvez sous système utilisateur (MacOs ou Windows), le fait que vous fassiez appel à un fichier nommé "" par "" ne pose a priori pas de problème. Tant que vous êtes sous système utilisateur.
Mais sur Internet, la plupart des serveurs - là où seront stockées vos pages personnelles - fonctionnent sous UNIX ou dérivé. Or Unix est sensible à la casse, c'est-à-dire que si vous appelez le fichier "" en tapant "", vous n'obtiendrez pas de réponse, ou un message d'erreur. Sous Unix, il s'agit de deux fichiers distincts.
En guise de conseil, essayez de n'utiliser que des minuscules dans vos noms de fichier (ou que des majuscules), ce qui vous permettra d'éviter ce risque d'erreur.Evitez de même les accents et les espaces dans les noms de fichiers
III. Html
Le langage HTML (Hyper Text Markup Language) est un langage de balisage, c'est à dire qu'il est composé de ce qu'on appelle des balises, balises qui sont ensuite interprétées par le navigateur, celui-ci produit la mise en forme du document.
C'est-à-dire, par exemple,Gras, italique, centré, formulaires, images, etc
Voici un exemple de balise :
xxxxx
Les balises sont écrites entre < et >. Elles vont généralement par paire, d'abord la balise ouvrante, marquant le début de l'action, et la balise fermante, marquant la fin de l'action. Celle ci est reconnaissable par le / placé juste après le
Certaines balises n’ont pas de balise de fermeture par exemple
qui permet le passage à la ligne, n’a aucune raison d’avoir une fermeture. Une bonne idée concite à adopter la syntaxe de XML, c'est-à-dire à mettre un antislash à la fin :
Les balises peuvent avoir des attributs qui se place également à l'intérieur des < >, comme ceci :
xxx
La valeur des attributs peut être avec ou sans guillemets simple ou double. On mettera toujours les valeurs entre guillemets, même si ça n’et pas obligatoire. De même, il est une habitude de mettre le nom des balises en majuscule. Si l’on veut une compatibilité XML, c’est à éviter. (à vérifier)
Dans un document HTML, certaines balises sont indispensables, elles forment la structure du document.
Html est très laxiste, Si certaines balises sont absentes ou non fermée ou même croisées, le document produit risque d’être correct. Mais il vaut mieux respecter les règles suivantes
La première balise est . Elle ouvre tous les documents. ferme le document.
La deuxième balise est . Théoriquement elle n'est pas obligatoire, une page HTML peut parfaitement fonctionner sans la balise HEAD. Mais en pratique elle se révèle indispensable. Elle contient la plupart des informations sur la page. Ces informations sont défini grâce à des sous balises de HEAD, de la manière suivante :
< BALISE_de_TETE>
Voici les principales balises (_de_tête) :
: Permet d'indiquer le titre de la page, celui qui s'affiche dans la page du navigateur .
: Permet de placer du script qui pourra être exécuter dans la page , Javascript ou VBscript par exemple.
: Donne des indications sur la page qui pourront être récupérées par les robots des moteurs de recherche, et pourront aussi fournir des infos aux personnes qui liront votre code.
La troisième balise formant la structure d'un document HTML est la balise .
C'est dans cette balise que va se placer tous le corps de la page html, c'est a dire tous son contenu. Tous le texte inscrit entre les balises et sera affiché à l'écran. Elle possède les attributs suivants:
HTML
|
Attribbut |
signification |
|
|
BGCOLOR=une couleur |
définit la couleur de fond du document, en RGB |
|
|
BACKGROUND = l'URL d'une image |
définit l'image de fond du document |
|
|
TEXT = une couleur |
définit la couleur du texte du document |
|
|
LINK = une couleur |
définit la couleur des liens du document |
|
|
VLINK = une couleur |
définit la couleur des liens visités du document |
|
|
ALINK = une couleur |
définit la couleur des liens actifs du document |
|
En résumé,voici un exemple dans lequel, il faut remplacer les … par du texte et les exemples de couleurs (#XXXXXX) par d’autres valeurs. :
