Leçons de niveau 15

SPARQL Protocol and RDF Query Language/Travail pratique/Initiation à Eclipse

Une page de Wikiversité.
Sauter à la navigation Sauter à la recherche


Début de la boite de navigation du travail pratique
Initiation à Eclipse
Image logo représentative de la faculté
T.P. no 6
Leçon : SPARQL Protocol and RDF Query Language

TP de niveau 15.

Précédent :Initiation à PHPUnit
Suivant :Faire un serveur SPARQL
Icon falscher Titel.svg
En raison de limitations techniques, la typographie souhaitable du titre, « Travail pratique : Initiation à Eclipse
SPARQL Protocol and RDF Query Language/Travail pratique/Initiation à Eclipse
 », n'a pu être restituée correctement ci-dessus.


À savoir avant de commencer[modifier | modifier le wikicode]

Les débogueurs PHP[modifier | modifier le wikicode]

Il n’y a que deux débogueurs pour PHP :

  • Zend, qui est intégré à la suite de développement payante Zend (à condition de disposer des serveurs de production également avec Zend sinon... bugs d’incompatibilités à prévoir)
  • Xdebug, qui est gratuit, mais qui est moins simple à installer

Nous installerons donc XDebug, car les étudiants ont un budget relativement limité pour ce genre de dépenses.


Exercice avec Docker[modifier | modifier le wikicode]

  1. A l’image de votre Docker précédent, rajouter XDebug pour pouvoir insérer des points d'arrêt dans votre code durant le débogage au travers de votre IDE.
  2. Tester: écrire une boucle en PHP, poser un point d'arrêt et essayer de l’exécuter "pas à pas".


Ancienne version du cours en 2012[modifier | modifier le wikicode]

Pourquoi utiliser Eclipse ?[modifier | modifier le wikicode]

Dans ce TP, nous allons installer Eclipse, ainsi que certains composants de débuggage.
Eclipse est l'un des logiciels les plus utilisés pour faire du développement Web et il est gratuit.
Malheureusement, sa puissance est inversement proportionnelle à son ergonomie. Il faut un certain temps pour arriver à l’utiliser correctement.

Ce TP a pour objectif de vous en montrer les avantages, mais aussi de vous faire gagner du temps sur l'installation du débuggeur, qui est indispensable à tout vrai développeur professionnel.

Documentations[modifier | modifier le wikicode]

Ce TP a été fabriqué avec les documents suivants :

Installation[modifier | modifier le wikicode]

Débogueur : XDebug[modifier | modifier le wikicode]

Il y a autant de manières d'installer XDebug qu’il y a de version de Linux.

Pour identifier si l'installation suivante peut fonctionner avec votre version de Linux, vous devez d’abord connaître la version que vous utilisez, avec la commande suivante.

lsb_release -a

L'installation suivante sera faite avec la version Ubuntu 10.04.3. Si ce n’est pas votre version, n'hésitez pas à comparer cette installation avec les résultats fournis par un moteur de recherche quand vous recherchez le nom de votre distribution Linux avec sa version et XDebug.

Ubuntu 10.04.3[modifier | modifier le wikicode]

Installez le composant php5-xdebug.

sudo apt-get install php5-xdebug

Ouvrez le fichier : /etc/php5/conf.d/xdebug.ini

sudo vim /etc/php5/conf.d/xdebug.ini

Ajoutez à la fin de ce fichier les lignes suivantes :

; configuration for php xdebug module
xdebug.remote_enable=1
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9000

Mettez à jour votre configuration.

sudo service apache2 reload

Vérifiez que XDebug est bien activé dans votre configuration PHP.

php -r 'phpinfo();' | grep -e "xdebug support => enabled"


Java Runtime Environment[modifier | modifier le wikicode]

Il n’est pas conseillé d'installer Eclipse via apt-get, il faut installer le JRE (Java Runtime Environment) séparément.

Installer le JRE (Java Runtime Environment) dont Eclipse a besoin :

sudo apt-get install default-jre

Vérifiez si votre version de JRE est 32 ou 64 bits :

java -d64 -version

ou

java -d32 -version


Eclipse[modifier | modifier le wikicode]

En fonction de la version de votre JRE, 32 ou 64 bits, vous choisirez la dernière version de "Eclipse Classic" x86 ou x86_64 : http://www.eclipse.org/downloads/

Nous installerons Eclipse dans votre répertoire personnel :

mkdir ~/opt

On passe dans le répertoire où votre navigateur a enregistré le package Eclipse, on le décompresse et on le déplace dans le répertoire ~/opt.

cd {directory where your browser downloaded the package to}
tar -zxvf eclipse-SDK-3.4.1-linux-gtk.tar.gz 
mv eclipse ~/opt

On fabrique le répertoire bin dans notre répertoire home, qui sera utilisé pour lancer Eclipse :

mkdir ~/bin

On crée le fichier qui sera le script d'exécution d'Eclipse :

vim ~/bin/eclipse

Copiez ce texte dans ce fichier :

export MOZILLA_FIVE_HOME="/usr/lib/mozilla/"
export ECLIPSE_HOME="$HOME/opt/eclipse"

$ECLIPSE_HOME/eclipse $*

On autorise le script à être exécuté :

chmod +x ~/bin/eclipse

Pour finir, on va créer un raccourci pour le mettre sur notre bureau :

  1. clic droit sur votre bureau
  2. créer un raccourci (ou create launcher)
  3. indiquer le nom : Eclipse
  4. indiquer le chemin du script (command) : /home/<your username>/opt/eclipse/eclipse
  5. cliquer sur l'icône pour indiquer le chemin du script de l'icône d'Eclipse : /home/<your username>/opt/eclipse/eclipse/icon.xpm
  6. cliquer sur OK

Vous pouvez maintenant double cliquer sur l’icône Eclipse sur votre bureau.

Eclipse s'ouvre et vous demande de préciser votre espace de travail, indiquer un autre répertoire que ~/projets. Cela évite un certain nombre de problèmes de configuration.

Configurer la source des mises à jour et des plug-ins d'Eclipse[modifier | modifier le wikicode]

Dans Eclipse :

  1. aller dans le menu : Help > Install New Software.
  2. cliquer que le bouton "Add...".
  3. renseigner les champs avec le nom Indigo et l'adresse http://download.eclipse.org/releases/indigo.

Vous pouvez maintenant installer les plug-ins PHP et Web.

Installer le plug-in PHP[modifier | modifier le wikicode]

Dans Eclipse :

  1. Aller dans le menu : Help > Install New Software.
  2. Choisir le site (Work with) : "Indigo -- http://download.eclipse.org/releases/".
  3. Attendre que la liste soit mise à jour (attendez que le mot pending disparaisse).
  4. Aller ensuite dans langages de programmation.
  5. Cocher la liste PHP Development Tools (PDT).
  6. Cliquer sur Suivant deux fois.
  7. Cocher Accepter les licences.
  8. Cliquer sur Terminer.

Après l'installation, Eclipse vous demande de redémarrer :

  • cliquer sur "redémarrer maintenant"

Installer le plug-in Web[modifier | modifier le wikicode]

  1. aller dans le menu : Help > Install New Software .
  2. Choisir le site (Work with) : "Indigo -- http://download.eclipse.org/releases/" .
  3. Attendre que la liste soit mise à jour (attendez que le mot pending disparaisse).
  4. Aller ensuite dans "Web, XML, JavaEE...".
  5. Cocher "Eclipse Web Developer Tools".
  6. Cliquer sur Suivant deux fois.
  7. Cocher Accepter les licences.
  8. Cliquer sur Terminer.

Après l'installation, Eclipse vous demande de redémarrer :

  • Cliquer sur "Redémarrer maintenant".

Ouvrir votre projet PHP dans Eclipse[modifier | modifier le wikicode]

Nous avons, dans le projet précédent, utilisé PHPUnit et créé l'arborescence de fichier du projet nommé MonCV. Nous allons ouvrir ce projet et le configurer.

  1. Ouvrir Eclipse.
  2. Menu Fichier > Nouveau projet.
  3. Ouvrer PHP > projet PHP.

La boîte de dialogue "Nouveau projet" s'ouvre.

  1. Donner un nom au projet : MonCv.
  2. Cocher : Créer un projet de sources existantes.
  3. Rechercher la racine du répertoire créé dans le TP précédent : ~/projets/moncv .
  4. cliquer sur Terminer (Finish).

Configurer la construction du projet[modifier | modifier le wikicode]

Nous allons utiliser Phing pour construire le projet automatiquement afin de permettre de le débugger.

À chaque modification d'un fichier dans le projet, le script build.xml sera exécuté pour les tests unitaires et déployé sur le serveur Web (/var/www/moncv) que nous avons configuré dans un précédent TP.

Pour ce faire :

  1. Faire un clic droit sur ​​le projet
  2. sélectionner Propriétés
  3. sélectionner Constructeurs (builder)
  4. cliquer sur Nouveau pour afficher la boîte de dialogue "Choisir le type de configuration"
  5. sélectionner Programme
  6. Cliquer sur OK

La boîte de dialogue pour créer une configuration s'est affichée :

  1. Donner un nom, par exemple : Phing build.xml
  2. Indiquer l'emplacement de l'exécutable (Location) : /usr/bin/phing
  3. Indiquer l'emplacement d’exécution (Working directory) :
    1. Cliquer sur le bouton Browse WorkSpace
    2. Sélectionner la racine où se trouve le fichier build.xml, ici MonCV
    3. Cliquer sur OK

L'emplacement d’exécution (Working directory) doit contenir quelque chose qui ressemble à :

${workspace_loc:/MonCv}

Maintenant, on indique les moments d’exécution :

  1. Aller dans l'onglet Rafraîchir (Refresh).
  2. Cocher la case "Rafraîchir les ressources" (Refresh resources upon each completion).
  3. Cocher "Espace de travail en entier" (The entire Workspace).
  4. Aller dans l'onglet Options (Build Options).
  5. Cocher l'auto-construction (During auto-build).

Cliquer finalement sur le bouton OK pour refermer la boîte de dialogue.

Configurer le débogueur[modifier | modifier le wikicode]

Indiquer le serveur utilisé pour débugger[modifier | modifier le wikicode]

Nous utiliserons le serveur Web que nous avons installé dans un précédent TP pour déboguer notre projet.

  1. Via le menu : Window > Preferences
  2. Ouvrir le nœud : PHP > PHP Servers
  3. Créer un nouveau serveur : MonCV
  4. Donner son domaine (base url) : « http://moncv » (ArchiveWikiwixQue faire ?). Consulté le 2014-09-20
  5. Donner la racine sur le disque du service Web (local Web root): /var/www/moncv
  6. Aller dans l'onglet Mapping
  7. Cliquer sur Nouveau
    1. Dans Chemin sur le serveur, indiquer : /var/www/moncv
    2. Cocher Chemin dans l'espace de travail
    3. Trouver la racine des sources, c'est-à-dire le répertoire src. Vous devez avoir comme résultat : MonCV/src
  8. Cliquer sur OK jusqu'à ce que toutes les boîtes de dialogues soient fermées

Indiquer le débogueur[modifier | modifier le wikicode]

  1. Via le menu : Window > Preferences
  2. Cliquer sur le nœud : PHP > Debug
  3. Dans la liste "PHP Debugger", choisir "XDebug"
  4. Cliquer sur Appliquer (Apply)
  5. Cliquer sur OK pour fermer la fenêtre

Débugguer une page Web[modifier | modifier le wikicode]

Créer une page Web[modifier | modifier le wikicode]

Nous allons créer une page PHP dans le répertoire src :

  1. Clic droit sur le répertoire src dans Eclipse
  2. Nouveau > PHP File
  3. Indiquer comme nom de fichier : index.php

Insérer le texte suivant dans le fichier :

<?php
phpinfo();

Sauvegarder, dans le menu : File > Save (ou Ctrl + s )

Insérer un point d'arrêt[modifier | modifier le wikicode]

Un point d'arrêt est un point placé à un endroit spécifique d'un programme qui permet d'indiquer à un débogueur d'arrêter l'exécution lorsqu’il atteindra cet endroit.

C'est très pratique pour voir à cet endroit la valeur des variables ou pour commencer à faire de l'exécution pas à pas dans le code.
Le pas-à-pas permet d'avancer dans le code "commande par commande". Il permet de voir exactement ce qui est exécuté par le programme.

Pour insérer un point d'arrêt, il suffit de double-cliquer sur le numéro de ligne où vous souhaitez que le programme s'arrête. Un point bleu doit apparaître dans la marge, ce qui indique le point d'arrêt.

Exercice : double-cliquer sur le numéro de ligne où se trouve la fonction phpinfo.
Ce point d'arrêt nous sera utile dans l'exercice suivant.

Créer un profil de débogage[modifier | modifier le wikicode]

Un site Web est composé de plusieurs fichiers PHP qui peuvent être autant de points d'entrée dans votre site. Si vous débuggez une page php particulière, il vous faudra créer un profil de débuggage pour cette page. À chaque fois que vous voudrez débugger une page, vous pourrez réutiliser le profil de cette page que vous avez créé.

Nous allons créer un profil de débuggage pour la page index.php.

  1. Via le menu : Run > Debug configurations
  2. Clic droit sur PHP Web Page
  3. Dans le menu contextuel, choisir Nouveau
  4. Donner un nom : index.php
  5. Indiquer le fichier PHP à exécuter en cliquant sur le bouton Chemin et trouver le fichier index.php (ce qui doit donner : /MonCv/src/index.php)
  6. Décocher : Break at first line (sinon le débuggeur s'arrêtera dès la première ligne)
  7. Décocher Auto-generate pour indiquer manuellement l'url index.php sur le serveur
  8. Modifier l'url /MonCv/src/index.php en laissant juste index.php
  9. Cliquer sur Appliquer (Apply) pour sauver
  10. Cliquer sur Fermer (Close)


Débugger[modifier | modifier le wikicode]

Eclipse a plusieurs modes d'affichage. Il y en a un pour PHP et un pour débugger. Eclipse vous demandera souvent de passer d'un mode à un autre automatiquement.

Pour revenir manuellement à un de ces modes, vous pouvez faire, dans le menu : Window > Open Perspective > PHP ou Debug.


Nous allons lancer le débuggage :

  1. En haut de l'écran (dans la toolbar), il y a un insecte avec un triangle, cliquer sur le triangle.
  2. Choisir index.php, qui est le profil que nous avons créé.
  3. Eclipse vous propose de passer en mode Debug : accepter.

Vous pouvez voir maintenant (si tout s'est bien passé) :

  • Zone Debug (en haut à gauche) : un carré rouge qui vous permet d'arrêter le débuggage
  • Zone Debug (en haut à gauche) : un triangle vert qui vous permet de poursuivre l’exécution
  • Zone Debug (en haut à gauche) : des flèches jaunes qui vous permettent de faire du pas-à-pas de différents types
  • Zone Fichier (au milieu à gauche) : vous voyez le fichier avec une flèche bleue
  • Zone navigateur (en bas) : c’est le navigateur par défaut (qu'on peut modifier dans les préférences) où vous pouvez voir le résultat de l'exécution, c'est-à-dire une page Web.

Vous découvrirez en jouant avec Eclipse les mille et une fonctions disponibles.

Vous disposez maintenant de l'environnement de développement qui va nous permettre de développer un service Web, mais surtout de suivre la leçon sur SPARQL.