Cours création site Internet

Cours Internet

D .Mailliet

Cours Internet ..1

Cours Internet ..7

1. Introduction 7
2. Logiciels utilisés ..7
3. Editeur de Textes .7
4. Navigateur 7
5. Serveur http .7
6. Interprète Php 7
7. Serveur de base de données MySQL ..7
8. Installation des logiciels ..7 a) Sous Windows .7
9. b) Sous Linux 7
10. Objectifs du cours : quelques « langages » pour Internet 7
11. Seul le client est utile 8 L’ HyperText Markup Language 8 a) Les feuilles de style ..8
12. b) Le javascript 8
13. c) Les applets java ..8
14. serveur(s) nécessaire(s) 8 a) Le Php ..8
15. b) Php - MySql 8
16. But de l’enseignement ..8
17. Clients et Serveurs ..8
18. Exemple 8
19. Client seul 9 3. Client et serveur 9 Bonjour .. 10
20. Fonctionnement Résultat 11 E. Javascript ou Php ? . 11
21.   Exemple 1 11
22.   Exemple 2 11
23.   Exemple 3 11 II. Attention à la casse .. 12

III. Html .. 13

1. Structure d'un document HTML . 13
2. Le laxisme du HTML 14
3. Présentation d’un document HTML . 14 D. Indentation ou pas .. 15 E. Liste des balises et des attributs .. 15
4. Du style dans le texte 33
5. Les titres 33

Mon titre en H1 .. 33

Mon titre en H2 . 33

Mon titre en H3 33

Mon titre en H4 .. 33

2. Les différents styles de caractères . 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

3. Styles logiques .. 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

1. Formater le texte 34 1. Les retours à la ligne :
   ou

..34 avec un retour à la ligne et une ligne vierge 34

2. Aligner le texte ..34

Votre paragraphe est au centre 34

3. Mettre du texte en retrait : ..34
4. Le texte préformaté : ..35
5. Césure ou pas de césure 35
6. Les traits de séparation : ..35
7. Les caractères spéciaux .35 8. Indice et exposant .36
8. Afficher des images 36
9. Les formats de fichiers graphiques 36 2. Affichage simple d'une image ..36 3. Les attributs de Erreur ! Nom du fichier non spécifié.37
10. Une image pour le fond de votre page .37 I. Les Liens HyperTextes ..37
11. Créer un lien hypertexte - 37
12. Utiliser les ancres - .38 a) Insérer une ancre .38
13. b)    Pointer vers une ancre 38
14. Les Listes 38
15. Listes à puces et listes numérotées .38 a) Les listes à puces -

..38

1. b) Les listes numérotées -

38

1. Mon premier élément de liste ..39
2. Mon deuxième élément de liste ..39
3. Les listes descriptives -

..39 3. Les listes

et

.39

4. Mêler les listes 40
5. Couleurs et Polices ..40
6. Définition des couleurs en HMTL .40 a) Les couleurs standard ..40
7. b)   Les codes hexadécimaux ..40
8. Les éléments de la page 40 3. Les polices de caractères : La balise ..41 a) Changer la taille par défaut ..41
9. Les Tableaux ..41
10. Définir un tableau -

42 2. Les cellules d'un tableau ..42 a) Les titres ..42

3. b)   Les cellules 43 3. Exemple de code pour un tableau ..43 M. Les frames .44
4. Le fichier ..44 2. Les attributs pour le fichier 44 3. Des fichiers HTML et des frames ..45
5. Exemple de code pour un fichier frameset 46 N. Formulaires de saisie ..46
6. Javascript 49
7. Généralités 49
8. Erreur dans un javascript .49
9. Erreur simple ..49
10. ErreurGrave .49
11. Commentaires 49
12. Constantes, Variables, types . 49
13. Variables .. 50 Le nom des variables est sensible à la casse (ie : x != X). 50
14. Constantes 50
15. La valeur sans valeur . 50 4. opérateurs divers .. 50 a) Opérateurs d’assignement : . 50
16. b)   Opérateurs de comparaison : . 51
17. c)   Opérateurs ‘affectation conditionnelle .. 51
18. Types .. 51
19. Généralités .. 51 a) Syntaxe objet 51
20. b)   Syntaxe Classe .. 51
21. c)   Syntaxe impérative 51
22. Booléens 51 a) Opérateurs logiques : .. 52
23. Les nombres 52 a) Les entiers: . 52
24. b)   Les nombres décimaux: 52
25. c)   Les opérateurs .. 52
26. d)   Les constantes mathématiques . 52
27. e)   Les fonctions 52 4. Les chaines: 52 a) L’opérateur de Concaténation 53
28. b)   Les fonctions .. 53
29. Les tableaux: .. 53 a) Tableaux simples 53
30. b)   Tableaux associatifs 54
31. c)   Tableaux multidimentionnels . 54
32. d)   fonctions 54 6. Les dates: . 56 a) Fonctions . 56
33. Les structures de contrôle .. 56
34. Conditionnelle .. 56 a) Le Si .. 56
35. b)   Le Cas . 57
36. Boucles .. 57 a) Boucle pour 57
37. b)   Pour dans .. 58
38. c)   Boucle tant que 58
39. Rupture et continuitéde boucle 58
40. Les fonctions .. 59
41. Passage des arguments par valeur . 59 2. Passage des arguments par adresse (par variable) 59
42. Arité variable . 59
43. Les procédures .. 60 I. Portée des variables . 60 J. Classes et Objets 61
44. Entrées/Sorties .. 61
45. sorties . 61 2. entrées 62
46. Fichiers .. 62
47. Inclusion de fichiers .. 62
48. Evénements : traitement .. 62
49. Evénements : simulation . 63

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

1. Objets prédéfinis ..64
2. Exemple très important : ..64
3. Les tableaux prédéfinis .65
4. Exemple : communication entre frames .66
5. Exercice : ..67
6. Feuilles de style ..69
7. La création de style .69
8. Les feuilles de style externes .70
9. Le fichier externe .70 2. L'intégration du fichier externe 70 C. Les propriétés de style ..70
10. Les propriétés de police 70
11. Les propriétés de texte ..71
12. Les propriétés d'arrière-plan ..71
13. Les propriétés de positionnement 71
14. Les propriétés d'encadrement 71
15. Exemples 72
16. Applet java .74
17. Généralités 74
18. Syntaxe 74
19. Passage de paramètres 75

VII.   Php ..76

1. Généralités 76
2. Commentaires .77
3. Constantes, Variables, types ..77
4. variables .77

Le nom des variables est sensible à la casse (ie : $x != $X). ..77

2. Nommage dynamique des variables .78 3. Constantes .79
3. Références 79 5. La valeur sans valeur .79 6. opérateurs divers ..79 a) Opérateurs d’assignement : ..79
4. b)   Opérateurs de comparaison : ..79
5. c)   Opérateurs ‘affectation conditionnelle ..79 7. Variables prédéfinies .80
6. Types 80
7. Booléens 80 a) Opérateurs logiques : 80 2. Les nombres .80 a) Les entiers: .80
8. b)   Les nombres décimaux: .81
9. c)   Les opérateurs ..81
10. d)   Les constantes mathématiques ..81
11. e)   Les fonctions .81
12. Les chaines: .83 a) L’opérateur de Concaténation .83
13. b)    Les fonctions 83
14. Les tableaux: 86 a) Tableaux simples .86
15. b)   Tableaux associatifs .86
16. c)    Tableaux multidimentionnels ..86
17. d)   fonctions .87
18. e)    Exemple 88 E. Les structures de contrôle 89
19. Conditionnelle .. 89 a) Le Si .. 89
20. b)   Le Cas . 90
21. Boucles .. 90 a) Boucle pour 90
22. b)   Boucle pour chaque 91
23. c)   Boucle tant que 92
24. d)   Boucle Faire tant que . 92
25. Rupture et continuité de boucle .. 93
26. Les fonctions .. 93
27. Passage des arguments se fait par valeur .. 93
28. Passage des arguments se fait par adresse (par variable) . 93
29. Les procédures .. 94
30. Portée des variables 94
31.   Classes et Objets 94
32. Entrées/Sorties 95
33. sorties . 95 2. entrées 95
34. Fichiers .. 96

Et pour la lecture 96

1. Inclusion de fichiers .. 97 VIII. PhpMyAdmin 98

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

1. Introduction
2. Logiciels utilisés
3. Editeur de Textes

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

2. Navigateur

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.

3.   Serveur http

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.

4. Interprète Php

Il fonctionne en collaboration avec le serveur http pour traduire le code Php en Html

5. Serveur de base de données MySQL

Il travaille en collaboration avec l’interprète Php et fournit les données extraites des tables.

6. Installation des logiciels

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

1. Objectifs du cours : quelques « langages » pour Internet

Nous distinguerons 2 grandes parties :

  Introduction

1. Seul le client est utile

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.

1. But de l’enseignement

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.

1. Clients et Serveurs

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)

1. Exemple

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.

4. Fonctionnement Résultat

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. 

1. Javascript ou Php ?

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

1. Exemple 1

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

2. Exemple 2

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

3. Exemple 3

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.

1. Attention à la casse 

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)

1. Structure d'un document HTML

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