Installation de l’environnement de travail 3








télécharger 1.06 Mb.
titreInstallation de l’environnement de travail 3
date de publication02.02.2018
taille1.06 Mb.
typeDocumentos
ar.21-bal.com > documents > Documentos




Support de cours
Formation ISN 2014 – module 5
22/05/2014
Centre de ressources informatiques - UCO



Table des matières

Préambule 3

Installation de l’environnement de travail 3

Le dossier de la formation 3

Un éditeur html, css, javascript, sql, php : Notepad++ 5

Description 5

Installation et lancement 6

Les fonctions et touches de raccourcis à connaître pour développer plus rapidement 6

Le plugin Emmett (niveau avancé) 7

Un navigateur web 8

Le choix de Google Chrome 8

Erreur à l’UCO : page inaccessible 8

Présentation des outils de développement 9

Quelques extensions utiles 9

Qu’est-ce qu’un L/WAMP ? 10

Description des principales briques d’un LAMP ou WAMP 10

UniServer 10

Configuration du serveur Web Apache 10

Accès à votre serveur WEB Apache 10

Accès aux autres serveurs WEB Apache 11

Configuration avancée d’Apache (niveau avancé) 11

Le HTML 14

Présentation 14

Un langage de description 15

Les principales balises 16

Flux et boîtes 16

Boîte de type bloc en flux normal 16

Boîte de type en-ligne 17

Les attributs 17

Les chemins 19

Application à notre exemple 19

Les feuilles de style (CSS) 22

Présentation 22

Principe 22

Les sélecteurs 23

Les propriétés 25

Les unités de mesure et les couleurs 27

Notion d’héritage 27

Notion de surcharge 28

Application à notre exemple 29

Comportement de type bloc ou de type en ligne 30

Les images 32

Le colonage 34

Conclusion 37

Le Javascript 38

Présentation 38

A quoi ressemble un script ? 38

Application à notre exemple 39

Les nœuds du DOM 42

Introduction aux fonctions 44

Introduction à jQuery 47

Les bases de données 50

Généralités 50

Le langage SQL 51

Le système de gestion de base de données MySQL 52

Présentation 52

Démarrage du serveur MySQL 52

PhpMyAdmin 52

Application à notre exemple 53

Test de requêtes 58

Le php 59

Présentation 59

Nommage des pages 60

Quelques règles de syntaxe 61

Application à notre exemple 63

Affichage de la liste des billets 63

Affichage de la liste des catégories 68

Insertion de données 70

Comment emporter mes travaux ? 78





Préambule


Cette formation s’articulera autour de la construction très simple d’une ébauche de blog sous un environnement Windows. Bien que des outils très puissants comme WordPress existent à cette fin, cet exemple nous permettra d’aborder concrètement toutes les couches qui constituent une application web.

Le sujet et toutes les notions qu’il développe sont impossibles à traiter dans un laps de temps si court, ainsi nous irons à chaque fois à l’essentiel en faisant évidemment l’impasse sur bien des choses. Les url citées tout au long de ce document vous permettront d’approfondir ou d’avancer sur des notions que nous n’aurons qu’effleurées ou même écartées.

Le support fait référence à divers endroits à la lettre de lecteur D:. Evidemment, à chaque fois remplacez-là par la lettre que vous aurez choisie durant l’installation des ressources.

Les chapitres ou zones de texte qui apparaissent de cette façon traitent de points de « niveau avancé ». Vous pouvez les passer sans que cela impacte le déroulement de la formation ou les explorer si vous avez déjà atteint un niveau de compréhension assez élevé.

Les paragraphes apparaissant de cette manière sont des citations provenant d’autres sites (la source étant mentionnée en dessous).

Installation de l’environnement de travail

Le dossier de la formation


Si vous possédez déjà ces 3 briques logicielles sur votre ordinateur ou souhaitez changer l’une d’entre elles : utiliser un autre navigateur, un autre éditeur, un autre WAMP (EasyPhp, Wamp, Xampp, etc), localisez la racine web de votre environnement et passez directement au chapitre « Le Html », page 11.

Avant toute chose vous devez récupérer le dossier qui contient tous les applicatifs décrits dans ce document. A savoir :

  • Un navigateur portable : Google Chrome

  • Un éditeur de code portable : Notepad++

  • Un environnement « web » complet portable : UniServer qui contient :

    • Un serveur web Apache

    • Un module PHP

    • Un serveur MySQL

    • Une interface de gestion (en PHP) pour MySQL : phpMyAdmin

Une fois décompressé, ce dossier – bien que volumineux, ≈ 300 Mo - pourra être copié, transporté et même exécuté depuis n’importe quel emplacement ou périphérique, comme une clé USB.

Si tout se passe bien, à la fin de l’installation, vous pouvez cliquer sur Fermer l’installateur et lancer le serveur.

Cependant, vérifiez que vous avez l’arborescence suivante (remplacez D: par la lettre de lecteur que vous avez choisi lors de l’installation) :

D:
+-- FORMATION_ISN
+-- GoogleChromePortable
+-- notepad++
+-- support
-- support_cours_ISN_mai_2014.docx
+-- UniServer
+-- www
+-- corrige
+-- etapes
+-- …
+-- formation
+-- css
+-- img
+-- js
-- index.html


Si UniServer s’est lancé vous devriez avoir la fenêtre ci-dessous. Si ce n’est pas le cas, vous pouvez lancer UniServer à l’aide du raccourci normalement présent sur le bureau (créé lors de l’installation) : Lancer serveur WEB (1).



Démarrer maintenant le serveur web à proprement parlé (Apache) en cliquant sur démarrer Apache (2).
Voilà, vous pouvez réduire cette fenêtre (3) ; mais ne la fermer surtout pas, auquel cas vous couperiez Apache et donc l’accès à notre serveur.

Nous démarrerons le serveur MySQL plus loin dans la formation mais si vous avez également cliqué sur démarrer MySQL ou encore sur démarrer les deux, cela n’aura aucune incidence sur le début de la formation.

Si jamais vous fermez par erreur UniServer et donc le serveur Apache, vous pouvez le relancer en cliquant sur le raccourci présent sur le bureau Lancer serveur WEB ou encore en exécutant d:\FORMATION_ISN\UniServer\demarrer.exe puis Démarrer Apache.

Un éditeur html, css, javascript, sql, php : Notepad++

Description


Notepad++ est un éditeur de texte générique codé en C++, qui intègre la coloration syntaxique de code source pour les langages et fichiers C, C++, Java, C#, XML, HTML, PHP, JavaScript, makefile, art ASCII, doxygen, .bat, MS fichier ini, ASP, Visual Basic/VBScript, SQL, Objective-C, CSS, Pascal, Perl, Python, R, MATLAB, Lua, TCL, Assembleur, Ruby, Lisp, Scheme, Properties, Diff, Smalltalk, PostScript et VHDL ainsi que pour tout autre langage informatique, car ce logiciel propose la possibilité de créer ses propres colorations syntaxiques pour un langage quelconque.

Ce logiciel, basé sur la composante Scintilla, a pour but de fournir un éditeur léger (aussi bien au niveau de la taille du code compilé que des ressources occupées durant l’exécution) et efficace. Il est également une alternative au bloc-notes de Windows (d’où le nom). Le projet est sous licence GPL.

Il ne bloque pas le fichier en cours d'édition et détecte toute modification apportée à celui-ci par un autre programme (il propose de le recharger).

[Source : Wikipédia => http://fr.wikipedia.org/wiki/Notepad%2B%2B]
Site Web et téléchargement : http://notepad-plus-plus.org/fr/

Cet éditeur léger se montre également très puissant dans sa capacité à recevoir des « plugins » afin de lui ajouter de nouvelles fonctionnalités.

Installation et lancement


Nous utiliserons durant cette formation la version portable du logiciel (que vous pouvez lancer par le raccourci présent sur le bureau ou directement dans D:\FORMATION_ISN\notepad++Portable\Notepad++Portable.exe), cependant, rien ne vous empêche d’installer sur votre poste une version « classique » du logiciel en vous rendant sur le site de l’éditeur (voir l’adresse plus haut).

Retenez que le choix de l’outil vous appartient puisque tout au long de cette formation, nous ne ferons qu’éditer du texte brut, ainsi, dans l’absolu, même le notepad de Windows pourrait suffire.

Les fonctions et touches de raccourcis à connaître pour développer plus rapidement


A savoir :

  • Notion de bloc : l’éditeur met en lumière les « blocs » en colorant le début et la fin d’un bloc ; dans un fichier html par exemple un
    et son
    seront ainsi colorés.
    Dans un document php, le début et la fin d’un bloc « if » par exemple.

  • La coloration syntaxique : tous les éléments du langage détecté sont colorés (bleu et rouge principalement)

Touches de raccourcis indispensables :

  • La recherche et le remplacement : Ctrl + F et Ctrl + H .

  • La complétion de fonction : Ctrl + Espace .

  • Augmenter l’indentation : Tab .

  • Réduire l’indentation : Shift + Tab .

  • Commenter/dé commenter une ligne : Ctrl + Q .

  • Commenter un bloc : Ctrl + Shift + Q .

  • Dupliquer une ligne : Ctrl + D .

  • Aller à la ligne x : Ctrl + G .

  • Sauvegarder le document en cours : Ctrl + S .

  • Annuler la dernière action : Ctrl + Z .

  • Rappeler la dernière action annulée : Ctrl + Y .

Si vous utilisez la version portable fournie dans le package de la formation, tout est paramétré. Si jamais vous utilisez une version classique, il vous faudra faire ceci :

Pour activer l’auto-complétion de fonction, se rendre dans Paramétrage > Préférences > Sauvegarde/Autocomplétion.

Pour activer « l’auto-fermeture » des balises HTML et des accolades/parenthèses : Compléments > plugin manager > show plugin manager puis chercher TextFX Characters et l’installer. Faire de même avec le plugin Emmett.
Attention, si vous vous trouvez à l’UCO, vous devrez auparavant configurer le proxy en vous rendant dans Settings puis en tapant les valeurs :

  • Proxy.uco.fr dans le champ Proxy address

  • 3128 dans le champ Proxy port

Notepad++ demande un redémarrage, acceptez. Un menu TextFX apparaît alors. Dans ce menu, aller dans TextFX settings et cocher +Autoclose XHTML/HTML et +Autoclose {([brace

Notre éditeur est désormais prêt pour coder efficacement nos fichiers !



Le plugin Emmett (niveau avancé)


Ce plugin vous permettra de taper du code html plus rapidement. Il est souvent fastidieux d’écrire - en dehors même du contenu textuel - la structure d’un document HTML, c’est-à-dire toutes les balises (et leurs attributs) emboitées les unes dans les autres.

Avec Emmett, vous tapez dans notepad++ :

  • div#page>div.logo+(ul#navigation>li*5>a[href=http://www.uco.fr])+table>tr*2>td*2

  • puis faites Ctrl + E .




Vous obtenez alors automatiquement :



Le gain de temps est évidemment inestimable ! Cependant, vous devrez bien maîtriser la notion d’emboitement (parents / enfants) des éléments HTML ainsi que la syntaxe des sélecteurs CSS.

Emmett fonctionne aussi avec les CSS, exemple :
m0 donnera margin :0px ;

Pour en savoir plus :

http://emmet.io/ et http://docs.emmet.io/

Un navigateur web

Le choix de Google Chrome


A l’heure actuelle ce navigateur est un des plus légers, un des plus rapides et un des plus respectueux des standards du web définis par le W3C (http://www.w3.org/) ce qui en fait un outil de choix, d’autant plus qu’il possède des outils de développements intégrés très puissants absolument essentiels pour le développement web.

Bien entendu, comme pour l’éditeur de code, vous êtes libre de choisir n’importe quel navigateur, tous donneront sensiblement le même résultat. Il faut simplement retenir qu’un navigateur possédant des outils de développement puissants vous fera gagner beaucoup de temps dans l’écriture de vos pages web.

Erreur à l’UCO : page inaccessible


Une fois l’environnement de travail installé, Chrome s’est lancé sur l’url : http://localhost/index.html et a généré une erreur.


Sur les réseaux d’entreprise, il arrive souvent que l’accès internet se fasse à travers un Proxy (un serveur qui filtre les pages demandées). Or ce dernier ne trouvera jamais sur le web d’adresse de type localhost ou 127.0.0.1 qui sont réservées aux accès locaux.

Nous devons donc dire au navigateur que pour tous nos accès locaux, il ne faut pas utiliser de proxy !

Pour ce faire, cliquez sur l’icône représentant « 3 gros traits » en haut à droite à côté de la barre d’adresse puis choisissez « paramètres dans le menu ». Vous pouvez également faire Ctrl + T pour ouvrir un nouvel onglet et taper dans la zone d’adresse chrome://settings/browser, cela revient au même.
Ensuite dans la zone de recherche, tapez « proxy » puis cliquez sur le bouton « Modifier les paramètres du proxy ».
Une nouvelle fenêtre s’ouvre, cliquez alors sur le bouton « paramètres réseau » et cochez la case « Ne pas utiliser de serveur proxy pour les adresses locales ». 

Présentation des outils de développement


L’accès aux outils de développement se fait en pressant la touche F12 .

  • L’onglet Elements permet de parcourir la structure HTML de la page WEB en cours.

    • Le survol des balises « textuelles » dans la console les met en évidence sur la page en les colorant (ainsi que ses principales propriétés métriques : marges externes, internes, mesures, etc).

    • Un clic permet d’accéder à toutes ses propriétés CSS et de les modifier « en direct »

    • Un double-clic permet de modifier « en direct » certaines propriétés ou l’élément lui-même.

  • L’onglet Resources liste toutes les ressources liées à la page (images, scripts, feuilles de style, cookies, etc) et permet d’en voir et modifier le contenu ou d’en avoir un aperçu pour les images.

  • L’onglet Network montre et décrit toutes les requêtes http survenant lors de la manipulation de l’utilisateur : chargement des différentes ressources, pages asynchrones, etc

  • L’onglet Scripts montre et permet d’intervenir sur tous les scripts javascript associés à la page.

  • L’onglet Console remonte les erreurs en général dont javascript ou les messages de debug

Quelques extensions utiles


  • ColorZilla : permet d’obtenir le code de n’importe quelle couleur présente sur une page web

  • PageRuler : permet de mesurer en pixel une zone de la page

  • IE tab : permet de simuler l’aspect d’une page sous IE

  • WhatFont : permet de connaître la police utilisée sur une page web

  • Resolution Test : tester une page dans différentes résolutions

Qu’est-ce qu’un L/WAMP ?

Description des principales briques d’un LAMP ou WAMP


L/WAMP est un acronyme désignant un ensemble de logiciels libres permettant de construire des serveurs de sites web. L'acronyme original se réfère aux logiciels suivants :

  • Linux ou Windows : le système d’exploitation

  • Apache est le serveur web « frontal » : il est « devant » tous les autres et répond directement aux requêtes du client web (navigateur) ;

  • MySQL est un système de gestion de bases de données (SGBD). Il permet de stocker et d'organiser des données ;

  • le langage de script PHP permet la génération de pages web dynamiques et la communication avec le serveur MySQL.

[Source : Wikipédia => http://fr.wikipedia.org/wiki/LAMP et http://fr.wikipedia.org/wiki/WAMP]

Sous Windows, il existe une multitude de logiciels (Easyphp, Wamp, etc) facilitant l’installation et la configuration des différentes briques d’un WAMP. De notre côté, nous choisirons Uniform Server.

UniServer


UniServer n’est pas le plus connu des WAMP mais lorsque l’on cherche un ensemble de petite taille (=130 Mo) pouvant facilement être transporté et exécuté sur une clé USB par exemple et avec les options les plus communes dont l’application de gestion de base de données MySQL, phpMyAdmin on retombe vite sur celui-ci.

Configuration du serveur Web Apache

Accès à votre serveur WEB Apache


Une fois lancé, Apache est accessible dans le navigateur par http://localhost ou encore http://127.0.0.1 qui correspond à l’adresse IP locale de la carte réseau de l’ordinateur.

Consulter cette page si vous souhaitez en savoir plus : https://fr.wikipedia.org/wiki/Localhost

Dans notre exemple, la racine web du serveur Apache se trouve sur D:\FORMATION_ISN\UniServer\www, c’est-à-dire que toutes les url du type http://localhost/qqchose pointeront vers D:\FORMATION_ISN\UniServer\www\qqchose.

Accès aux autres serveurs WEB Apache


Dans le cadre de la formation, vous aurez installé dans la même salle un serveur WEB chacun. Tous ces serveurs seront donc accessibles les uns aux autres par leur adresse IP puisque étant sur le même réseau. Vous serez tous à la fois client (le navigateur) et serveur à la fois.

Exemple (à l’UCO seulement, salle E123) : http://172.1.123.1 dans votre navigateur vous affichera les données du poste 1, http://172.1.123.15 du 15, etc.

Configuration avancée d’Apache (niveau avancé)


Si à la fin de l’installation du dossier de formation, page 5, votre serveur web répond sur http://localhost et qu’une page web avec le texte « Le serveur Apache est démarré et fonctionnel » apparaît, vous pouvez passer ce chapitre.

Si vous souhaiter comprendre comment changer localhost en autre chose ou encore changer le répertoire définit comme « racine web », lisez la suite.

Ce chapitre (comme tous les autres d’ailleurs !) mériterait à lui seul 2 jours pleins que nous n’avons pas, c’est pourquoi nous allons nous contenter de configurer le serveur sans entrer dans les détails et toutes les fonctionnalités d’Apache en utilisant la configuration par défaut.

Pour aller plus loin, voir la documentation officielle ici : http://httpd.apache.org/docs/2.0/fr/

La plupart des programmes provenant du monde Linux se paramètrent ou se configurent dans des fichiers texte possédant l’extension .conf, c’est le cas d’Apache avec le fichier racine_apache/conf/httpd.conf dans lequel on positionne des directives.

Il contient entre autres la définition du serveur Web, les ports utilisés, les modules à charger (php, ssl => gestion du https, etc.), le ou les hôtes virtuels nommés (en quelque sorte les URL de votre serveur comme http://www.monsite.com) ainsi que les éventuelles règles de réécriture d’URL(http://fr.wikipedia.org/wiki/Htaccess#URL_Rewriting). Les lignes commençant par # sont inactives ou commentées.

En fonctionnement « standalone » (autonome), tous les chemins seront écrits de façon relative, nous ne taperons donc pas c:\mon_chemin\mon_dossier mais /mon_chemin/mon_dossier en partant depuis la racine du périphérique, ici D:.

Apache venant du monde linux, on utilise des slaches plutôt que des anti-slaches.

Ouvrons le fichier D:\FORMATION_ISN\UniServer\usr\local\apache2\conf\httpd.conf et rendons-nous :

  • à la ligne 35 ( Ctrl + G > taper 35) et modifions la directive ServerRoot - qui correspond à la racine parente d’Apache - pour la faire correspondre à notre environnement :

    ServerRoot "D :/FORMATION_ISN/UniServer/usr/local/apache2"




  • ligne 176 : la directive ServerName va indiquer le nom du serveur. C’est ce nom que nous chercherons à atteindre dans le navigateur pour accéder aux pages web de ce dernier.
    Généralement, on garde comme valeur localhost ou encore l’adresse IP locale de la carte réseau : 127.0.0.1.

Dans notre exemple, nous allons plutôt simuler un serveur public de l’internet : choisissons un nom comme par exemple formationisn qui correspondra à l’adresse d’accès de notre serveur.

Notez que nous ne pouvons pas utiliser la syntaxe des urls (www.exemple.fr) que nous connaissons tous puisque réservée aux noms de domaines publics. Toutes les adresses que vous définirez ci-dessous ne seront accessibles qu’à votre ordinateur et ceux de votre réseau local si ces derniers peuvent les résoudre, c’est-à-dire faire correspondre le nom de domaine avec l’adresse ip.

Sous Windows on définit ces correspondances dans le fichier suivant :

c:\windows\system32\drivers\etc\host

et pour que votre serveur web fonctionne, vous devez au moins déclarer votre propre url en la liant à l’adresse IP locale de votre poste (qui est toujours égale à 127.0.0.1 pour tous les ordinateurs du monde) de cette manière :

127.0.0.1 formationisn

Maintenant, si vous voulez accéder au serveur web de votre voisin, ajoutez son url et cette fois ci l’adresse IP de son poste, par exemple :

172.1.123.10 urldemonvoisin

De cette manière, si votre voisin a défini dans son fichier host :

127.0.0.1 urldemonvoisin

vous pourrez alors accéder à son serveur web en tapant http://urldemonvoisin/ dans votre navigateur. Attention, si lui aussi a choisi l’url formationisn, vous tomberez forcement sur votre propre serveur et non le sien !

Revenons à notre fichier httpd.conf :

  • ligne 183 : la directive DocumentRoot indique la racine des ressources web

    DocumentRoot " D:/FORMATION_ISN/UniServer/www"


  • ligne 210 : quelques propriétés sont définies pour le dossier parent de la racine des ressources web, c’est-à-dire lui-même. Ecrire :

    D:/FORMATION_ISN/UniServer/www">

    Et laisser l’intérieur de ce bloc inchangé.

Voilà notre serveur web est prêt !

Démarrez ou redémarrer le serveur web (ref. page 2) puis dans le navigateur, tapez l’adresse http://formationisn ou celle que vous avez configuré avec la directive ServerName ; la page index.html du dossier D:\FORMATION_ISN\UniServer\www devrait s’afficher et donc afficher : Le serveur Apache est démarré et fonctionnel !

Le HTML

Présentation


L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des éléments programmables tels que des applets. Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade). HTML est initialement dérivé du Standard Generalized Markup Language (SGML).

[Source : Wikipédia => http://fr.wikipedia.org/wiki/Hypertext_Markup_Language]
[Aller plus loin => http://www.commentcamarche.net/contents/html/]

Un fichier HTML 5 possède une structure de base que voici :





"utf-8" />

<b>Titre</b>



similaire:

Installation de l’environnement de travail 3 icon1Se préparer à l’installation de l’environnement

Installation de l’environnement de travail 3 iconInstallation de BizTalk Server 2010 et de l'analyse bam dans un environnement multiserveur

Installation de l’environnement de travail 3 iconLa dernière solution de ThinPrint print Management Center automatise...

Installation de l’environnement de travail 3 iconInternet Installation / configuration : gnu/Linux, Apache, Mysql,...

Installation de l’environnement de travail 3 iconSlide 6 : transition L'environnement de travail en place, je vais...

Installation de l’environnement de travail 3 iconJean-Louis borloo et Benoist apparu présentent la Réglementation...
«Grenelle Environnement 2012» : la généralisation des Bâtiments Basse Consommation, une ambition sans équivalent en Europe p. 5

Installation de l’environnement de travail 3 iconP la conférence de Tbilissi, en 1977
«à acquérir les connaissances, les valeurs, les comportements et les compétences pratiques nécessaires pour participer de façon responsable...

Installation de l’environnement de travail 3 iconReprésentations et mémoire du travail Agricole ou maritime, artisanal...

Installation de l’environnement de travail 3 iconAussi le travail principal est de commencer à apprendre la cocréation...

Installation de l’environnement de travail 3 iconRésumé Le travail temporaire est apparu en France dans les années...
«Choisir l’intérim : sous quelles conditions ?», Socio-Économie du Travail n° 29 (Économies et Sociétés, tome xli/12), décembre 2007,...








Tous droits réservés. Copyright © 2016
contacts
ar.21-bal.com