[Tutorial] Installation d'un environnement de développement web/php

Tifox · 27 Sept 2007

INTRODUCTION
Rassurez-vous, je ne vais m'introduire nulle part (du moins pas si vous êtes un homme ou que vous n'êtes pas consentent :-D )

Avant toute chose, le but est d'expliquer comment installer utiliser un environnement de développement html/php/mysql/javascript/... performant. Cela s'adresse donc a des personnes qui désirent s'investir un minimum car l'apprentissage des outils est un peu plus ardu qu'un simple éditeur de texte. La programmation en elle-même ne sera pas non plus abordée.

Je ne prétend pas non plus que ces outils sont les meilleurs de manière général, c'est juste ceux que moi je trouve les meilleurs et que j'utilise régulièrement.

L'environnement se compose des outils suivant
Eclipse 3.3-Europa: l'éditeur en lui-même. Son avantage est qu'il possède énormément de possibilités et qu'il existe de nombreux plugins pour encore étendre ses possibilité. Ceci est un inconvénient aussi car on peu etre un peu perdu au début.
Eclipse plugin PDT: le plugin pour rajouter le support php (autocompletion, liste des classes et méthodes, template de fichiers, ...) et le support du debugger php ZendDebugger
Eclipse plugin JSEclipse: le plugin pour rajouter le support javascript (autocompletion, liste des classes et méthodes, ...)
Eclipse plugin SQL Explorer: le plugin pour accéder au base de données
Eclipse plugin FTP and WEBDAV support: le plugin pour synchroniser les projet local avec un FTP

Firefox: le browser web
Firefox plugin Web Devlopper: plugin permettant d'afficher certaines informations sur la page (id, bord tableau, css, contenu de formulaire, ...), de modifier les css a la volée, d'activer/desactiver certains fonctionnalités (javascript, images, ...)
Firefox plugin Firebug: le plugin qui ajoute des fonctionnalité de debuggage (javascript, consultation requete envoyée et reçue, explorateur DOM) et d'édition à la volée (javascript, DOM, ...)
Firefox plugin Measure It: le plugin qui rajoute un "règle à pixel"
Firefox plugin Live HTTP Header: le plugin qui permet de voir les header HTTP des requetes envoyées et réponses réçues.

Internet Explorer: le browser web
Internet Explorer plugin IE DOM Explorer: possède des fonctionnalités similaires au plugins Web Devlopper et Measure It de Firefox
Internet Explorer plugin DebugBar: possède des fonctionnalités similaires au plugin Firebug de Firefox, sansle debugger Javascript
Internet Explorer plugin Debugger Javascript: ajoute un debugger javascript (je n'ai jamais réussi a le faire fonctionner)

XAMPP lite: Le serveur web. Il contient notamment Apache, php 5, mysql 5, phpmyadmin, ...

INSTALLATION
Téléchargement

Eclipse - plugin Eclipse - XAMPP: Eclipse-php
C'est un pack contenant le tout, en version Windows. La raison est que Eclipse ne s'installe pas, et XAMPP non plus. Par contre, pour trouver les version de Eclipse, de php contenu dans XAMPP et du debuggeur ZEND qui sont compatible entre elle est assez galère, donc j'ai tout mis ensemble. Avec en prime les plugin d'eclipse déjà installé.

Firefox: http://www.mozilla-europe.org/fr/products/firefox/
Firefox plugin Web Devlopper: https://addons.mozilla.org/fr/firefox/addon/60
Firefox plugin Firebug: https://addons.mozilla.org/fr/firefox/addon/1843
Firefox plugin Measure It: https://addons.mozilla.org/fr/firefox/addon/539
Firefox plugin Live HTTP Header: http://livehttpheaders.mozdev.org/

Internet Explorer: Si vous avez windows, vous l'avez déjà. Si vous n'avez pas windows, vous n'en n'avez pas besoin.
Internet Explorer plugin IE DOM Explorer: http://www.microsoft.com/downloads/...64-672D-4511-BB3E-2D5E1DB91038&displaylang=en
Internet Explorer plugin DebugBar: http://www.debugbar.com/
Internet Explorer plugin Debugger Javascript: http://www.microsoft.com/downloads/...e0-94fd-4569-b3c4-dffdf19ccd99&DisplayLang=en
Notez que ce debugger n'a jamais fonctionné chez moi et a même empêché les script IE de fonctionner correctement.

Installation d'Eclipse et d'XAMPP
Commencez par décompresser le contenu du fichier "Eclipse-php.zip" sur votre disque dur, que nous appellerons "x". Par défaut, le dossier est fait pour être décompressé dans "c:\Program Files". Si ce n'est pas le cas, suivez ces quelques opérations :

Lancez "x\Eclipse-phpxampplite\setup_xampp.bat". Cliquez sur 1 puis ENTER lorsqu'il vous demande "Do you want to refresh the XAMPP installation?".

Lancez "x\Eclipse-php\eclipse.exe" pour lancer Eclipse. Cliquez sur "Window > Preferences..." Pour accéder à la configuration d'Eclipse. Allez dans le panneau "General > Stratup and Shutdown" et cochez "Prompt for workspace on startup". Quittez Eclipse et relancez-le. Il va vous demandez de spécifiez l'emplacement du workspace (le workspace est le dossier dans lequel Eclipse fait sa popote interne quand vous l'utilisez). Spécifiez "x\Eclipse-php\workspace" et cochez "Use this as default and do not ask again".

Retournez dans les préférences d'Eclipse, dans le panneau "PHP > PHP Manual", sélectionnez "Local Manual Fr" et cliquez sur "Edit...". Dans "Local directory, indiquez le dossier "x\Eclipse-php\php_manual_fr".

Pour lancer XAMPP (qui lancera le serveur web/php/mysql), lancez "x\Eclipse-php\xampp-control.exe". DAns le petit panneau de controle des serveur qui se lance, Décochez les cases à coté de "Svc", puis cliquez sur les 2 boutons "Start" a coté de "Apache" et de "Mysql". Si les le serveur web/php est bien lancé, un rectangle vert va s'afficher à côté de "Apache", et pareil à côté de "Mysql" si le serveur mysql est bien lancé.

Vu l'absence de raccourcis, Eclipse se lance avec "x\Eclipse-php\eclipse.exe", et le server web se lance via la panneau de controle de XAMPP "x\Eclipse-php\xampp-control.exe"

Installation "manuelle" d'Eclipse et du debugger
Si vous ne désirez pas installer tout le pack fourni, par exemple parce que vous avez déjà une version de Eclipse ou de Apache/PHP installée, il existe plusieurs tutoriaux plus ou moins complet sur le net. Une recherche dans google avec "Eclipse PHP IDE install" donnes déjà quelques résultats intéressants.
Je peux vous conseiller quand-même ce tutorial, assez complet mais en anglais :
http://www-128.ibm.com/developerworks/library/i-osource13/index.html
Notez qu'en fonction de la chance que vous aurez, il vous sera plus ou moins difficile de trouver les bonnes versions des plugins et du debugger en fonction de l'installation que vous avez déjà.

Installation de Firefox et des plugins
Pas de subtilité ici, vous installez Firefox en lançant le fichier d'installation que vous avez téléchargé.
Pour les plugins, si vous les avez déjà téléchargez, vous devez ouvrir les fichier *.xpi dans firefox pour les installer (Fichiers > Ouvrir le fichier...). Si vous ne les avez pas encore téléchargez, faite le avec Firefox, il vous proposera de les installer directement.

Pour lancer Firefox, cliquez sur l'icône dans le menu démarrer

Installation de Internet Explorer et des plugins
Pas de subtilité ici non plus, vous avez normalement déjà Internet Explorer sur votre PC (en version 6 ou 7). Pour installer les plugins, lancez les fichier d'installation de chacun d'eux que vous avez téléchargé.
Notez que si vous désirez avoir plusieurs version de Internet Explorer pour tester vos applications, vous pouvez utiliser ceci : http://tredosoft.com/Multiple_IE. Je ne l'ai pas testé convenablement, je ne sais donc pas si c'est efficace ni si les plugins sont fonctionnels dessus.

Pour lancer Internet Explorer, cliquez sur l'icône dans le menu démarrer.

Tifox · 27 Sept 2007

CREATION D'UN PROJET AVEC ECLIPSE
Nous allons maintenant créer un premier site web avec eclipse et l'afficher avec apache via XAMPP. On va voir les fonctionnalités de base d'Eclipse (il y en a beaucoup d'autre) et survoler (de très très haut) la configuration de Apache.

Tour du propriétaire
Lancez Eclipse, on va faire d'abord un petit tour de ce qu'on a à l'écran.

1. Eclipse est organisé en "persepective". Une perspective correspond grosso-modo a une fonctionnalité globale de Eclipse. Actuellement, c'est la perspective "php" qui est affichée, qui permet d'édition d'un projet php. C'est celle-là qu'on va decrire ci-après car c'est dans celle-là que vous allez passer la majorité de votre temps.
2. Bouton pour changer de perspective et en ajouter de nouvelles. Dans les boutons affichés, le premier bouton permet d'ajouter d'autre perspective que celles déjà présente dans les boutons suivant, le second est la perspective "PHP" en cours, le troisième la perspective "PHP Debug Perspective" (qui permet toute les opérations de debug) et le quatrième la perspective "SQL Explorer". Ce sont celle que j'utilise.
3. L'éditeur de fichier. C'est ici que se trouvera, organisé en "tab", les fichiers que vous editerez.
4. L'explorateur de projet et de fichier. C'est ici que se trouvera une arborescence des fichiers dans votre projet.
5. Dans ces "tabs" se trouvent les méthodes et classes disponible. Dans le "Outline, ce sont celles disponible dans le fichier visible dans 3, dans "PHP Project Outline", ce sont celle pour tout le projet, et dans "PHP Functions", ce sont celles disponible dans PHP.
6. Différents "tabs" d'informations : la console, la liste des taches (si vous ajouter un commentaire "// TODO" dans votre projet, il apparaitra dans ce "tab"), la liste des problème (Eclipse vérifie en direct la présence de problème, que ce soit dans le code ou dans la validité des fichier HTML ou encore d'autre problème).

Premier projet, dans Eclipse
Nous allons réaliser un mini-site de 1 page.

1. Cliquez sur "File > New... > PHP Project...".
2. Dans la boite de dialogue qui suit, donnez un nom a votre projet dans "Project Name", et indiquez dans "Project contents" le dossier sur le disque dur où seront situés les fichiers. Par défaut, il propose de mettre les fichier dans le workspace, dans un dossier au nom du projet. Cela est déconseillé car si Eclipse a un souci, il faudra peut-être purger le workspace. Si vous avez déjà un dossier avec tous les fichier d'un projet, vous pouvez l'indiquez ici aussi, Eclipse va créer un projet a partir de ces fichiers.

3. Cliquez sur "Finish".
4. Votre projet a du apparaitre à gauche dans "PHP Explorer". Cliquez avec le bouton droit de la souris dessus et Cliquez sur "New > PHP File" pour créer un nouveau fichier *.php.

5. Donnez un nom a votre fichier dans "File Name" (ici, "index.php" car ce serra le premier fichier du projet). Cliquez sur "Next". Sélectionnez le template adéquat (ici, "New PHP file - HTML" car on va faire une page HTML avec du php dedans). Cliquez sur "Finish", la page a du apparaitre dans l'éditeur de fichier et dans le "PHP Explorer".

6. On va éditer ce fichier pour ajouter un peu de code php et voir "la combinaison de touches magiques". Placez le curseur entre <?php et ?>, tapez pri, puis la combinaison de touches magiques "CTRL+ESPACE". Le menu d'auto-completion va apparaitre avec toute les possibilités à partir de ce que vous avez déjà tapé. Sélectionnez "print" et taper une chaine de caractère après.

7. Si vous rajoutez une fonction, vous allez voir apparaitre celle-ci dans le "Outline" et dans le "PHP Project Outline" à gauche en bas. Si vous cliquez dessus, cela vous ramène directement dans le ficher à l'endroit où est défini la fonction.

8. Si vous faite une erreur et que vous sauvez le fichier (ici, on va oublier un ";" en fin de ligne). Eclipse va détecter l'erreur, la marquer dans l'éditeur avec un croix a côté du numéro de la ligne, en soulignant en rouge dans le texte l'endroit supposé de la faute, en mettant une petite croix à côté du fichier où il y a l'erreur dans le "PHP Explorer" et en notant l'erreur dans le "tab" "Problems" en bas.

Premier projet, dans Apache
Nous allons configurer le serveur web pour afficher notre projet, et afficher notre première page réalisée plus haut.

1. Ouvrez le fichier "x\Eclipse-php\xampplite\apache\conf\httpd.conf" avec le bloc-note.
2. On va créer un alias pour notre projet. Tout a la fin du fichier, ajouter

Code:

Alias "/base" "C:/temp/base/"
<Directory "C:/temp/base">
	Options Indexes FollowSymLinks Includes
	AllowOverride All
	#Order allow,deny
	Allow from all
</Directory>

Il faut remplacer /base par l'alias que vous voulez donnez, avec un slash devant (en général, le nom du projet sans espace), remplacer C:/temp/base/ par le chemin vers le dossier de votre projet avec des slash au lieu des backslash et avec un slash à la fin C:/temp/base par le chemin vers le dossier de votre projet avec des slash au lieu des backslash sans le slash à la fin.
3. Sauvegardez et fermez le fichier.
4. Lancez XAMPP-Control ("x\Eclipse-php\xampplite\xampp-control.exe"), et démarrez Apache.
5. Lancez un navigateur internet et tapez l'url "http://127.0.0.1/base/", en remplaçant "base" par l'alias que vous avez donné au point 3. Normalement, une votre page devrait se lancer.

Tifox · 27 Sept 2007

UTILISATION DU DEBUGGER
Nous voici a ce qui est, pour moi, la fonctionnalité la plus intéressante (ou du moins celle qui m'a réellement pousser a passer a Eclipse): Le debugger.

Pour ceux qui ne savent pas ce qu'est un debugger, c'est une "fonctionnalité" qui permet, lorsqu'un programme tourne, de l'interrompre à n'importe quel moment afin de connaitre l'état de celui-ci, c'est a dire les valeurs de toutes les variables, les entrées sorties, ... Fini donc d'utiliser les "echo $var;" à tout bout de champs pour essayer de comprendre pourquoi votre page web n'affiche pas ce qu'elle devrait.

Préparation
Nous allons préparer un exemple pour illustrer le fonctionnement du debugger.

1. Lancez Apache via XAMPP.
2. Lancez Eclipse
3. Dans Eclipse, créez un projet avec les 2 pages web dont le contenu est ci-dessous. La première page fait simplement une boucle générant un lien vers la seconde page , dont l'argument passer à la seconde page est chaque fois différent. La seconde page affiche ce paramètre.

index.php

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Insert title here</title>
</head>
    <body>
    <?php
    	for ($i = 0; $i < 5; $i++) {
    		echo '<a href="page.php?var='.$i.'">page '.$i.'</a><br />';
    	}
	?>
    </body>
</html>

page.php

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Insert title here</title>
</head>
    <body>
    <?php
    	echo 'page '.$_GET['var'];
	?>
    </body>
</html>

Debug
Supposons que nous désirons connaitre, sur la page "index.php", la valeur de la variable "$i" à chaque itération de la boucle, et sur la page "page.php", la valeur de la variable passée en argument. Pour réaliser cela, on va insérer des "breakpoint" dans la code aux lignes auxquelles on désirent interrompre l'exécution pour connaitre les valeurs de nos variables.

Pour insérer un "breakpoint", il suffit de double-cliquer dans la colonne à gauche des numéros de lignes, au niveau de la ligne où on désire interrompre l'execution. Notons que l'interruption se fait juste avant la ligne, après que la ligne précédente ait été exécutée. On va donc ajouter un "breakpoint" à la ligne 10 de "index.php" et à la ligne 9 de "page.php".

Avant de lancer le debug, on va vérifier le navigateur par défaut de Eclipse. C'est celui-la qui sera utilisé. pour l'affichage des pages.
1. Cliquez sur "Windows > Preferences..."
2. Allez dans "General > Web browser"
3. Sélectionnez le navigateur que vous désirez utiliser. Je vous conseille d'utiliser un navigateur externe (je ne sais pas trop quel moteur de rendu utilise Eclipse, et il est parfois foireux chez moi).

Pour lancer le debug.
1. Cliquez sur "Run > Open Debug Dialog...". Un fenêtre va s'ouvrir pour vous permettre de créer et configurer un debug.
2. Sélectionnez "PHP Web page" et cliquez sur le bouton "New Launch Configuration" (la petite feuille avec un + en haut à gauche).

3. Donnez un nom à votre configuration dans le champ "Name". Dans "Server Debugger", sélectionnez "Zend" et dans "PHP Web Server" sélectionnez "Default PHP Web Server". Dans "File/Project", sélectionnez le fichier de départ de votre debug (ici, "index.php"). Dans "URL", décochez "Auto-generate" et indiquez l'url par laquelle votre page est accessible via le browser. La case "Break at first line" est à cocher si vous désirez que le debugger ajoute automatiquement un breakpoint au debut de chaque page.

4. Cliquez sur le "tab" "Advanced". Cochez "Open in browser" pour que la page soit lancée dans le navigateur par défaut de Eclipse. Vous pouvez choisir quelle(s) page(s) debugger. Ici vu qu'on a plusieurs page à debugger a partir de la première, on choisi "Debug All page".

5. Laissez le contenu du "tab" "Common" par défaut.
6. Cliquez sur "Apply" puis sur "Debug" pour lancer le debug.
7. La première page devrait se lancer dans le navigateur, puis s'arreter directement, et Eclipse va revenir au premier plan en ouvrant la perspective "PHP Debug Perspective". Ceci est le cas idéal. Il arrive souvent que le switch entre votre navigateur et Eclipse ne se fasse pas automatiquement ; vous aurez donc toujours le navigateur sous les yeux comme si celui-ci attendait des informations. Allez simplement manuellement dans Eclipse. Dans Eclipse, il est possible que la perspective de debug ne s'ouvre pas automatiquement ou que vous aillez un message demandant si vous voulez ouvrir la perspective. Si c'est le cas, il faut aussi aller dans la perspective manuellement (en cliquant "OK" sur le message si vous en avez un ou en cliquant sur le bouton de la perspective "PHP Debug Perspective" en haut à droite).
8a. Dans Eclipse dans la perspective "PHP Debug Perspective", dans le tab "Debug", sléctionnez le nom de votre page (ici "index.php") si ce n'est pas déjà fait.
8b. Dans les tabs en dessous, la page en cours de debug (ici, toujours "index.php") devrait être au premier plan. Dans la colonne a gauche des numéro de ligne, une petite flèche bleu représente l'endroit ou l'exécution s'est interrompue. On voit ici que c'est au niveau de notre "breakpoint", donc tout va bien.
8c. Dans le "tab" "Variables", toutes les variables connues sont indiquées et vous pouvez connaitre leurs valeurs. On voit notamment que la variable "$i" qu'on désirait observer possède la valeur 0
8d. Ici se trouvent les "tabs" avec les infos générées. Dans le "tab" "Debug output", on voit le code html généré par l'exécution de notre page php, au moment ou l'exécution a été interrompue.
8e. Ici se trouve les boutons pour continuer l'exécution ligne par ligne (donc on va exécuter la ligne puis de nouveau s'arrêter avant la suivante), en rentrant éventuellement dans les fonction si il y en a sur la ligne.
8f. Le bouton "Play" pour continuer l'exécution jusqu'au breakpoint suivant. Une fois que vous vous avez vérifiez la (les) variable(s) que vous vouliez observer, cliquez dessus.

9. L'exécution a donc repris et s'est arrêtée au "breakpoint" suivant. Celui-ci est le même que le précédant, saut que la boucle a exécuté une itération de plus. On vérifie que notre variable "$i" a bien été incrémentée, qu'une ligne a été ajoutée dans le "Debug output" et on re-clique sur le bouton "Play"
10. Idem 9. Pour ne pas faire toutes les itérations de la boucle, on va enlever le "breakpoint" en double cliquant sur celui-ci (toujours dans la colonne à coté des numéros de lignes dans le "tab" contenant notre fichier "index.php"). On re-clique sur Play.
11. Ici, l'exécution de notre page s'est terminée. On retourne voir dans le navigateur le resultat.

12. Dans la page dans le navigateur, on va cliquer sur un des liens, qui ouvre tous la même page "page.php" mais avec un argument "var" différent. Ici, cliquons sur le 3e, "var" devrait être égal à 2.
13. Vu notre "breakpoint", l'exécution va de nouveau s'interrompre pour nous permettre de voir que la variable "var" vaut bien 2. Vu que la "var" est passé en argument a la page, elle se trouve dans la variable "$_GET". Cliquez sur play pour terminer l'exécution.

Remarque : il existe un bouton pour lancer rapidement une session de debug, c'est le "poux vert" Cliquez dessus et il relance le dernier debug, cliquez sur la petite flèche à coté pour avoir un menu avec tous les dernier debug effectué, plus divers options dont "Open Debug Dialog...".

Tifox · 27 Sept 2007

UTILISATION DES AUTRES OUTILS
Pour les autres outils, je vais faire un survol de leurs fonctionnalité plutôt que des tutorials détaillés, car ils sont relativement intuitifs et facile a utiliser. Je m'attarderai cependant un peu plus sur les points qui me semblent essentiels.

Accès à la base de données MySQL
Pour accéder à la base de données, j'utilise deux outils :
- L'interface web phpmyadmin, qui est une interface permettant de visualiser et de modifier de manière intuitive le contenu de la base de données.
- Le plugin Eclipse SQL Explorer, qui permet d'executer des requetes sql sur la base de données et d'avoir plusieurs informations sur celle-ci.

Pourquoi utiliser les 2 ? Car phpmyadmin est facile a utiliser sauf pour une chose : l'exécutions de requête sql directement (ce qui arrive fréquemment quand on fait un site un peu complexe, on désire souvent tester facilement ses requête sans passer par la page qu'on développe). De plus, vu que c'est une interface web, c'est relativement lent.

phpmyadmin
Après avoir lancé Apache et MySQL via XAMPP, on y accède via le navigateur :
http://127.0.0.1/phpmyadmin/

Vu que je ne vais pas réinventer le web, il existe plein de tutorials sur l'utilisation de phpmyadmin, je vous renvoie donc à ceux-ci, que vous pouvez facilement trouver via google ou ici par exemple :
http://www.siteduzero.com/tuto-3-134-1-phpmyadmin.html

SQL Explorer
Petit tour du propriétaire :
1. Bouton pour accéder à la perspective "SQL Explorer"
2. Liste des connexion vers une (des) base(s) de données.
3. Structure de la base de donnés sélectionnée. Quand une base de données est ouverte en 2, sa structure apparait ici.
4. C'est ici que vous pourrez créer vos requetes SQL
5. Dans le "tab" "Database Détails" apparait les infos l'élément de la base de données sélectionnée en 3. Dans le "tab" "SQL Result" apparait les résultats des requêtes SQL effectuées.
6. Un historique des requêtes effectuées.

Pour se connecter à votre base de donnée, il faut configurer le drivers qui permet à Eclipse d'accéder au base de données MySQL et la connexion vers votre base de données :
1. Cliquez sur "Window > Preferences...".
2. Sélectionnez "SQL Explorer > JDBC Driver".

3. Sélectionnez "MySQL Driver" et cliquez sur "Edit"
4. Cliquez sur le "tab" "Extra Class Path" et supprimer tous les drivers présents
5. Cliquez sur "Add" et allez récupérer le bon driver "x\Eclipse-php\mysql-connector-java-5.0.7-bin.jar"
6. Cliquez sur "List Drivers", une liste de drivers devrait apparaitre dans le champ "Driver Class Name".
7. Dans ce champ "Driver Class Name", sélectionnez "com.mysql.jdbc.Driver" et cliquez "OK".

8. Normalement, dans les préférences d'Eclipse, la petite croix rouge avant "MySQL Driver" a du être remplacé par un petit "v". Cliquez OK pour sortir des préférences.

9. Dans le "tab" "Connexions" de la perspective "SQL Explorer" d'Eclipse, cliquez avec le bouton droit de la souris sur la connexion déjà crée "mySQL" et sélectionnez "Edit".

10. Dans la boite de configuration qui vient de s'ouvrir, dans le champ "Driver", sélectionnez "MySQL Driver". Dans le champ "URL" indiquez "jdbc:mysql://127.0.0.1/". Si vous n'avez pas modifiez les login et mot de passe d'accès à la base de données, laisser le champ "User Name" à "root" et "Password" à "". Cliquez sur "Ok"

Voila, la connexion est configurée. On va se connecter à la base de données, voir ce qu'on obtient comme informations dans les différents "tabs" et exécuter une requete.
Dans le "tab" "Connexions", double-cliquez sur "mySQL" pour ouvrir la connexion avec la base de donnés. Si la connexion a réussi, un "SQL Explorer" devrait être apparu au milieu, et la base de donnés devrait être apparue dans le "tab" "Database Structure". Dans ce "tab" "Database Structure", la liste des bases est présentes. si vous "développez" une des base (en cliquant sur le petit "+"), vous avez les liste des différentes informations disponibles pour cette base. Notamment, dans le dossier "Tables" se trouvent les différente tables de cette base. Si vous cliquez sur une des tables, les informations sur cette table apparaissent dans le "tab" "Database Details".

Pour exécuter une requête, tapez votre requête dans le "SQL Editor". Vérifiez bien dans le champ 1 que c'est la bonne base de données qui est sélectionnées, éventuellement dans 2 la base. cliquez sur le bouton 3 "Execute SQL" (le petit bonhomme qui court) ou utilisez le raccourci clavier "CTRL+ENTER" pour exécuter votre requête.
Si un résultat doit apparaitre (pour les requête de type "insert", "update", ... il n'y aura logiquement pas de résultat), il s'affichera dans le "tab" "SQL Result" en dessous de "SQL Editor" (4).

Remarques :
- si vous effectuez un "select" sur beaucoup de donnée, décochez la case "Limit rows" en bas de "SQL Editor". Si elle est cochée, cela aura pour effet de limiter le résultat au 100 premiers tuples (=lignes) de votre base table.
- Si vous n'indiquez rien dans 1 et 2, vous devrez préfixer vos nom de table dans la clause "from".
- Si vous avez une erreur dans votre requête, le message d'erreur contiendra 2 codes assez peu explicite. Vous pouvez consultez ces liens pour avoir plus d'informations :
http://vista.intersystems.com/csp/docbook/DocBook.UI.Page.cls?KEY=RSQL_sqlerrors
http://www.ianywhere.com/developer/product_manuals/sqlanywhere/0901/fr/html/dberfr9/00000010.htm

Firefox plugin : Web Developer Toolbar
Si la barre d'outil n'est pas visible dans Firefox, activez-la dans "Affichage -> Barres d'outils -> Web Developer Toolbar".
La barre d'outils est organisée en plusieurs menus deroulants.

Disable : Permet d'activer et de désactiver certaines fonctionnalité de Firefox ou des pages web tel que le cache, le javascript ou le java, ... Notez que la désactivation des cookies, du CSS et des images se trouvent dans les menus correspondants et pas dans celui-ci.

Cookies : Permet de désactiver les cookies, de supprimer les cookies enregistrer, de visualiser les cookies utilisés par la page et de créer un cookie.

CSS : Permet de desactiver le CSS, de visualiser les CSS et de les éditer en temps réel.
Pour visualiser les styles utilisés par un élément spécifique de la page, utilisez "CSS -> View style information" ; le curseur va se transformer en une petit croix qui permettra de sélectionner un élément (celui-ci est entouré de rouge) et d'afficher les styles utilisé par celui-ci.
Pour éditer les styles, utilisez "CSS -> Edit CSS". Toutes les feuilles de styles utilisées par la page en cours vont s'afficher, avec la possibilité de les modifiers en temps réel. Notez que les modification ne sont pas sauvegardées dans les fichiers CSS lorsque vous quittez la page.

Forms : Permet d'afficher des informations cachées sur les formulaires, et permet des opérations sur les fomulaires.

Images : Permet d'afficher des informations cachées sur les images, et permet des opérations sur les images.

Information : Permet d'afficher la plupart des informations cachées dans la page HTML.

Outline : Permet d'encadrer tout ce qui est "blocs" dans une page, tel que les div, les tableaux, les cellules de tableau, ...

Resize : Permet de redimentionner la fenetre de Firefox à une résolution définie. Pratique pour tester son site dans différentes résolutions sur votre superbe écran 72".

Tools : Différents outils qui permettent de valider votre page (HTML, CSS, ...), d'afficher l'inspecteur DOM ou les consoles d'erreurs, ...

View Source : Permet de voir la source de la page. "View Source -> View Source" permet de voir la source HTML tel qu'elle est envoyée par le serveur ; "View Source -> View Generated Source" permet de voir la source HTML de ce qui est affiché (= ce qui est envoyé par le serveur plus les diverses modifications effectuées en javascrip, ...)

Options : Les options du plugin.

Tout à droite se trouvent 2 icones. La première icone (un "V" vert ou un "X" rouge) indique si la page est valide ; un clic dessus donnes des informations sur la pages. La seconde icone indique si il y a des erreurs (javascript, ...) dans la page ; un clic dessus ouvre la console.

Firefox plugin : Firebug
Si Firebug n'est pas activé, cliquez sur "Affichage -> Firebug" pour l'activer.

Console : Console Javascript sur la gauche, elle permet d'exécuter en temps réel du code javascript sur la droite.

HTML : Explorateur du fichier HTML sur la droite, la droite contient des informations sur l'élement sélectionné. Remarquez que l'élement sélectionné est surligné en bleu dans la fenètre principale. Il est possible de sélectionnez un élement directement dans la fenètre principale en cliquant sur "Inspect" (en haut à gauche de Firebug) puis en cliquant sur l'élement dans la page.

CSS : Permet de visualiser et d'éditer les styles existants.

Script : Le debugger javascript. Vous pouvez sélectionner le fichier contenant le script à debugger en haut à gauche, et ajouter des breakpoint dans la partie gauche contenant le fichier selectionné. Lorsque le breapoint est atteint, les informations (valeurs des variables, ...) se trouvent dans la partie droite.

DOM : Un inspecteur DOM

Net : Permet de voir le temps de chargement de la page complète et de chaque élément séparé.

Firefox plugin : Live HTTP Header
Pour avoir la console peremettant de voir en direct les requetes et réponses HTTP, cliquez sur "Outils -> Live HTTP Header".

Firefox plugin : Measure It
Une fois installé, une icone représentant une règle devrait se trouver en bas à gauche de Firefox. Cliquez dessus pour activer Measure-It, puis dessinez un rectangle à l'écran pour en connaitre directement sa taille en pixel.

Autres outils
Réservé, à venir

Ahava · 27 Sept 2007

Excellent post qui va en aider plus d'un !

J'attends la suite

PunkDeLuxe · 28 Sept 2007

Merci Tifox

Angy · 28 Sept 2007

Super!

Tifox · 28 Sept 2007

Ajout de la seconde partie concernant la création d'un projet avec Eclipse et une petite introduction à Eclipse et l'installation du projet sur le serveur web Apache (contenu dans XAMPP).

vitAl · 28 Sept 2007

Joli

.

Je vais m'installer tout cela ce week end si j'ai le courage

.

(après faudra encore trouver le courage de développer après journée lol dur dur)

(si un jour tu t'ennuies penses à la version java/jsp

)

Merci!

Noir · 28 Sept 2007

Merci, j'ai hate de voir la suite, moi qui n'ai jamais compris le PHP, ce sera peut-être une occasion pour m'instruire un peu plus

Tifox · 2 Oct 2007

Voila, la 3e partie est en ligne, concernant le debugger.

Toute mes excuses pour l'orthographe déplorable (je ne me suis pas vraiment relu encore, mais je vais regarder ça, c'est promis

), et la qualités des photos pas top non plus (j'étais un peu juste sur mon quota sur gamerz).

Pour ceux qui voudraient partir d'une installation déjà existante de apache ou pour fonctionner sous linux, j'expliquerai peut-être plus tard comment tout installer a partir des version de base et pas du pack que j'ai fait. Mais un petite recherche sous google devrait vous donner quelques tutos (je n'ai pas les adresse ici de ceux que j'ai utiliser, mais aucun ne marchait directement, j'ai du adapter le bazar et fouiller pour trouver des versions compatibles des différents programmes et plugins).

coOly · 2 Oct 2007

Ca a l'air super! J'ai hate de trouver un peu de temps pour essayer tout ça et voir si c'est mieux que Notepad++ et easyPHP

Merci beaucoup pour l'initiative!

ftpcrazy · 2 Oct 2007

Merci pour ce tutorial c'est plus qu'interessant

j'ai lu dans le tuto qu'il était possible d'ajouter des plugins à eclipse, est ce qu'il existe un plugin pour le c/c++ et le latex ??

Si tel est le cas ca m'interesserait fortement de pouvoir centraliser tout sur un seul programme, parceque entre visual c++ dreamweaver easyphp et texmaker ca commence à faire lourd

merci de la réponse.

Tifox · 2 Oct 2007

coOly a dit:
Ca a l'air super! J'ai hate de trouver un peu de temps pour essayer tout ça et voir si c'est mieux que Notepad++ et easyPHP

Je n'ai jamais essayé Notepad++, donc je ne sais pas juger de la qualité de l'éditeur. Mais je sais qu'il n'a pas le debugger. Pour easyphp, tu ne verra aucune différence avec XAMPP. Si j'ai choisi xampp, c'est uniquement parce que je n'ai pas trouvé de debugger qui marchait avec la version de php fournie avec easyphp 2.

ftpcrazy a dit:
est ce qu'il existe un plugin pour le c/c++ et le latex ??

Je sais qu'il existe un plugin pour le C/C++, mais je ne sais pas si il est efficace ou pas, et je ne suis pas sur du tout qu'il rivalisera avec visual c++ (ça se saurait).
Pour latex, aucune idée. Après une rapide recherche, j'ai trouvé ceci (mais pas testé, ça fait trop longtemps que j'ai plus fait de latex) :
http://texlipse.sourceforge.net/

ftpcrazy · 2 Oct 2007

Tifox a dit:
Je sais qu'il existe un plugin pour le C/C++, mais je ne sais pas si il est efficace ou pas, et je ne suis pas sur du tout qu'il rivalisera avec visual c++ (ça se saurait).
Pour latex, aucune idée. Après une rapide recherche, j'ai trouvé ceci (mais pas testé, ça fait trop longtemps que j'ai plus fait de latex) :
http://texlipse.sourceforge.net/

Merci de ta réponse

Je vais regarder tout ca.

Est ce que tu aurais des sites pour eclipse ou je pourrais trouver des plugins, et d'autre informations.

Je sais qu'il y à google mais comme apparement tu boss assez bien avec Eclipse j'imagine que tu as de très bon site en rapport

merci à toi.

Tifox · 2 Oct 2007

http://www.eclipse.org
http://www.eclipseplugincentral.com/
Sinon, j'utilise google :-'

En passant, je viens de voir que le plugin c/c++ était CDT : http://www.eclipse.org/cdt/

ftpcrazy · 2 Oct 2007

Tifox a dit:
http://www.eclipse.org
http://www.eclipseplugincentral.com/
Sinon, j'utilise google :-'

En passant, je viens de voir que le plugin c/c++ était CDT : http://www.eclipse.org/cdt/

Merci bien

Oui j'ai trouver CDT, j'ai réussi à l'installer sans trop de problème par contre j'ai pas mal de problème,

J'ai trouver le moyen de lui dire ou est mon repertoire d'include mais il persiste à vouloir utiliser usr/include et me fait des erreur à chaque fois :s

je vais essayer de trouver une solution.

Ce serait dommage que ca ne marche pas, parceque l'éditeur en lui même est vraiment puissant en tout cas.

Tifox · 2 Oct 2007

Pour CDT, je ne sais pas trop t'aider, je ne l'ai jamais utilisé. Par curiosité, il utilise quoi comme compilateur, CDT ?

Tifox · 3 Oct 2007

Début de la quatrième partie (qui n'est pas finie) avec l'explication des outils pour accéder, lire et modifier une base de données : l'interface web phpmyadmin et le plugin Eclipse SQL Explorer.

vitAl · 19 Oct 2007

Tifox a dit:
INTRODUCTION
Installation d'Eclipse et d'XAMPP
Commencez par décompresser le contenu du fichier "Eclipse-php.zip" sur votre disque dur, que nous appellerons "x".

Aie, je cale déjà... Quand j'essaie de décompresser, voici le message que j'obtiens :

"File '.fileTableLock' is password protected. Please enter the password in the box below."

Il y a moyen de "skipper" ce fichier mais après il me dit la même chose pour about.html puis un autre fichier puis un autre etc...

Si tu peux m'aider, ce serait sympa j'ai envie de bosser un peu mon php pendant le week end!

Merci!

[Tutorial] Installation d'un environnement de développement web/php

ou pas

ou pas

ou pas

ou pas

Revenant

condom

Elite

ou pas

GamerZ2008

Never forget who i am !

ou pas

Elite

Elite

ou pas

Elite

ou pas

Elite

ou pas

ou pas

GamerZ2008

Autres sujets récents