Démarrage du projet EasyAppointments
Prérequis au bon fonctionnement de l’application :
PHP 7.4 : https://formulae.brew.sh/formula/[email protected]
MAMP: https://www.mamp.info/en/mamp/mac/
NodeJS (en version LTS – Long Time Support): https://nodejs.org/en/download/
-- Étape 1 : Récupérer le lien du fork EA.
https://framagit.org/interhop/toobib/easyappointments.git
Cliquer sur le bouton Clone, copiez le lien « clone with HTTPS » puis passez sur votre IDE.
Dans ce cas, je vais utiliser PHPStorm mais la manipulation est la même pour IntelliJ.
-- Étape 2 : Cloner le repo sur votre IDE.
Ouvrez votre IDE et sur la page d’ouverture d’un projet, cliquez sur « Get from VSC ».
Cette page vous permet d’importer votre projet.
- Dans la partie URL, il vous suffit de coller le lien du fork que vous avez copier précédemment (voir capture ci-dessus).
- Directory est le chemin d’accès vers le dossier dans lequel vous souhaitez installer votre projet. Par défaut, avec PHP, il faut enregistrer votre projet dans le dossier htdocs afin de pouvoir l’exécuter avec Mamp.
- Cliquez sur « Clone » et laisser votre IDE initialiser le projet.
-- Étape 3 : Préparer le projet dans votre ide.
Lorsque votre ide aura terminé d’indexer le projet, vous arriverez sur cette page avec à gauche, la racine de votre projet et tous les fichiers existants.
Maintenant vous pouvez ouvrir le terminal de votre IDE.
Dans celui-ci nous allons commencer à entrer certaines lignes de code afin de finaliser l’installation.
Commencez par la commande d'installation NPM :
npm install
Ensuite tapez la commande de mise à jour de Composer :
composer update
Note : Si vous rencontre une erreur au moment de d’exécuter la commande « composer update », merci de recommencer avec la commande :
Composer update –ignore-platform-regs
-- Étape 4 : Mise en place de l’outil de gestion des bdd.
Afin de faire fonctionner pleinement l’application, il vous faudra une base de données active et fonctionnel. Pour ce faire, sur mac vous avez la possibilité d’utiliser MAMP (lien disponible dans les prérequis).
Une fois celui-ci installé, rien de plus simple.
Ouvre mamp puis cliquer sur Start en haut à droite.
Une fois votre serveur mamp démarré, cliquez sur « WebStart » afin d’accéder à votre interface.
Une fois sur l’interface web de Mamp, cliquez sur « Tools » en haut à gauche puis sélectionnez « phpMyAdmin ».
Vous voilà dans votre interface de gestion de vos BDD.
Prochaine étape, la création de la bdd.
-- Étape 5 : Création de la BDD.
Afin de pouvoir enregistrer des utilisateurs, des actions et autres, il nous faut une bdd.
Pour ce faire, cliquez sur « Nouvelle base de données » sur la gauche de votre page.
Ensuite nous allons créer une base de données pour EasyAppointments.
Sur l’écran suivant, il vous suffit de nommer votre bdd (le nom de celle-ci est à votre convenance) puis de cliqué sur « Créer ».
Voila ! Votre base de données est créée et prête à être utiliser.
-- Étape 6 : Ajout de la BDD à notre application.
De retour sur notre Ide, nous allons faire en sorte que celui-ci communique avec notre base de données.
Pour ce faire, ouvrez le fichier nommé « config-sample.php » qui se trouve à la racine de votre projet.
Les informations qui vont nous intéresser dans ce fichier se trouvent entre la ligne 33 et la ligne 45.
Par défaut, elle sont préremplie comme dans la capture ci-dessous.
A nous d’entrer nos informations de connexion comme dans la capture suivante.
« BASE_URL » indique l’url à utiliser afin de se connecter à l’application. Par défaut celle-ci se nomme : http://localhost/lenomdevotreprojet
Ensuite nous allons paramétrer les informations de BDD.
« DB_HOST » correspond au type de connexion. Sauf indication contraire, par défaut celui-ci est en localhost.
« DB_NAME » est le nom que vous avez donnez à votre BDD dans phpMyAdmin.
« DB_USERNAME » est le nom que vous avez donnez à votre utilisateur par défaut dans phpMyAdmin.
« DB_PASSWORD » est le mot de passe que vous avez donnez à votre utilisateur par défaut dans phpMyAdmin .
Une fois cette étape terminée, il va falloir renommer le fichier que nous venons de modifier, config-sample.php en config.php.
Pour ce faire, clic droit sur le fichier puis « refactor » et ensuite rename.
Il ne vous reste qu’à modifier le nom de votre fichier comme sur la capture ci-dessous et cliquer sur « Refactor ».
Cela va vous ouvrir un onglet dans le bas de votre ide et va vous demander si vous voulez faire un refactor. Cliquez sur « Do refactor » et c’est fini.
-- Étape 7 : Démarrage de notre application.
Viens l’étape finale. Démarrer notre projet.
Pour ce faire, taper la commande « npm start » dans le terminal de votre ide.
Vous devriez obtenir un résultat similaire à la capture ci-dessous.
Maintenant, il vous faut retourner sur mamp, cliquez « webstart » et une fois sur la page internet de votre mamp, cliquez sur « website » en haut à droite.
Vous arriverez sur une fenêtre « Index Of / » dans laquelle s’afficherons tous les projets que vous avez dans votre dossier htdocs.
Il vous suffit de cliquer sur celle que vous souhaitez lancer, dans notre cas easyappointments et si toutes les étapes ont bien été respectée, vous devriez arriver sur la page d’accueil de votre application.
Bienvenue sur Easyappointments, bon dev à vous :)