Création d'un nouveau projet
Un nouveau projet, c'est la feuille blanche. Vous démarrez votre projet à partir de rien. Aucune page HTML ou script PHP ou tout autre composant. Pas de panique, c'est la même chose avec d'autres éditeurs de code source.
Notre projet
Nous allons imaginer un nouveau projet. Un site web sur lequel les particuliers pourront donner ou revendre les fins de stock de matériaux et outillages une fois qu'ils ont achevé des travaux:
- échafaudages, bétonnière, etc...
- ciment, gravier, sable, planches de coffrage...
Notre site va s'appeler fin-de-chantier (s'il existe, désolé, j'avais pas vérifié avant d'acrire l'article...).
En toute logique, notre projet portera le même nom:
finDeChantier
A partir de maintenant, nous allons faire référence aux commandes NetBeans en anglais. Si vous avez francisé NetBeans, vous retrouverez sans difficulté les commandes équivalentes.
Donc, pour ce projet, nous allons d'abord lancer NetBeans.
Une fois NetBeans lancé, cliquer sur File et sélectionner New Project:
Dans la sous-fenêtre Categories, sélectionner PHP et dans la sous-fenêtre Projects, sélectionnez PHP Application.
Cliquez ensuite sur Next:
Dans cette seconde étape, vous devez:
- dans le champ intitulé Projet Name, saisir le nom du projet: finDeChantier. Nous retrouverons ensuite ce nom de projet à chaque ré-ouverture de NetBeans.
- dans le champ intitulé Sources Folder sélectionner et indiquer le répertoire dans lequel vous allez mettre les codes sources de votre site web. Attention: le nom du répertoire n'est pas obligatoirement le même que le nom de votre projet.
- dans le champ intitulé PHP Version, choisir la version PHP la plus récente, sauf si le chef de projet (le client) impose une architecture avec une version spécifique. Dans le doute, indiquez toujousr la version la plus récente.
- dans le champ intitulé Default encoding sélectionner l'encodage UTF-8 sauf si le client vous impose un encodage différent. Pour comprendre l'intérêt de l'encodage UTF-8, se reporter au chapitre coder intégralement en UTF8
- dans le champ intitulé Put NetBeans metadata into a separate directory vous pouvez laisser cette option en l'état. Si vous la modifiez, indiquez le répertoire dans lequel vous allez stocker ces méta-données. Par exemple, sur un support externe, ces méta-données vous permettront d'utiliser les paramètres de votre projet sur des ordinateurs et/ou des environnement de développement différents. Pour notre exemple, nous allons laisser ce champ inchangé.
Concernant l'encodage des fichiers sources du projet, vérifiez bien que les fichiers sources récupérés d'une autre application soient encodés avec le meme encodage que ceux de votre projet. Si ce n'est pas le cas, vous devrez ré-encoder ces fichiers sources avant de les intégrer à votre application.
Cliquez ensuite sur Next:
Cette troisième étape permet de définir l'environnement d'exécution de votre application web:
- le champ intitulé Run As indique si l'environnement d'exécution est local. Pour votre projet, vous devez installer WAMP Server (pour Windows) ou LAMP Server (pour Linux). Pour notre exemple, nous laisserons ce champ inchangé.
- le champ intitulé Projet URL indique l'URL local permettant d'exécuter nos scripts. Pour un serveur WAMP ou LAMP, cet URL sera toujours de la forme http://localhost/<site>, dans notre exemple: http://localhost/finDeChantier. Cet URL est fonctionnel si vous avez activé WAMP ou LAMP Server en local sur votre PC de développement.
Si vous n'avez pas installé WAMP ou LAMP server en local sur votre PC de développement, vous pouvez utiliser le serveur final distant pour exécuter vos scripts. Certains clients hébergent des serveurs dits de pré-production et de production. En l'absence de serveur local, vous pouvez utiliser le serveur de pré-production. Si l'hébergeur du site final ne propose pas d'environnement de pré-production, créez un sous-domaine test ou mieux pprod. Pour notre exemple, si le site final sera accessible par:
http://www.fin-de-chantier.com/
on accèdera à la pré-production en tapant:
http://pprod.fin-de-chantier.com/
Cet URL ne sera opérationnel que si vous créez un sous-domaine pprod et que ce sous-domaine contient tous les codes sources et images du site final. Vous devrez ensuite re-copier tous les fichiers sources dans le répertoire www du site définitif une fois les scripts testés et fonctionnant sans erreur.
Cliquez ensuite sur Next:
Cette dernière étape vous permet de sélectionner le framework que vous allez utiliser. Pour notre exemple, nous n'utiliserons pas de framework. Nous allons donc valider notre projet en cliquant sur Finish
Le début du projet
Maintenant notre projet intitulé finDeChantier est visible dans la partie gauche de NetBeans, onglet Projects.
Pour notre nouveau projet, NetBeans a créé un fichier index.php. C'est le fichier minimal indispensable pour débuter.
Pour un site très simple, il nous faut déja organiser les répertoires qui vont héberger nos composants:
- un dossier img ou images pour les images
- un dossier css pour les feuilles de style
- un dossier js pour les scripts JavaScript
- ...etc...
Créer des sous-dossiers
Pour créer des sous-dossiers dans notre projet, aller dans la partie gauche de NetBeans, ongletProjects, développer notre projet finDeChantier et sélectionner Sources Files.
Ensuite, clic-droit avec la souris, sélectionner New et Folder:
Procéder ainsi pour tous les dossiers et sous-dossiers nécessaires à votre site web.
Créer des fichiers
La création d'un fichier n'est pas plus complexe. Pour créer un nouveau fichier, par exemple styles.css dans le dossier css, sélectionner le dossier css dans notre projet finDeChantier, puis cliquer dans la barre de menu sur New et sélectionnez Cascading Style Sheet. Dans la fenêtre indiquez le nom du fichier à créer, ici styles pour créer styles.css:
ATTENTION: si vous avez paramétré l'encodage général de votre projet en UTF-8, tous vos fichiers sources seront encodés en UTF-8. Si vous éditez les fichiers sources élaborés à partir de NetBeans avec un autre éditeur, vérifiez bien que cet éditeur gère correctement l'encodage UTF-8.
Si vous copiez le contenu d'un script que vous n'avez pas développé, faites un copié depuis l'éditeur externe avant de coller le fragment de code dans votre page éditée avec NetBeans. Un fragment de code non encodé UTF-8 sera automatiquement ré-encodé en UTF-8 si votre projet est encodé en UTF-8.
Jusque là, vous vous dites certainement que NetBeans n'apporte pas grand chose de plus qu'un éditeur de code source basique et même certainement moins qu'un éditeur de code wysiwyg. Accrochez-vous car vous allez rapidement changer d'avis.
Voyons maintenant la reprise d'un projet existant