DEV FRONT END
Cours de Julie Chaumard 25/11/2024
- Faire le cahier des fonctionnalités de l’application
- Faire une maquette des pages sur Figma
Nom de domaine
- Rechercher un nom de domaine pour notre futur application sur OVH
- Peut-être existe-t-il une extension banque ?
MOTEUR DE TEMPLATE
PHP
La dernière version stable de PHP est la 8.4.1 du 21 novembre 2024
INSTALLATION
Ce tuto donne la procédure d’installation sur un ordinateur Windwos
Inspiré par ChatGPT : https://chatgpt.com/share/675944b1-69bc-8004-ba5b-7c9facace525
Étapes pour installer phpMyAdmin via XAMPP
- Télécharger XAMPP :
- Allez sur le site officiel de XAMPP : https://www.apachefriends.org.
- Téléchargez la version appropriée pour votre système (Windows 32 bits ou 64 bits).
- Pendant l'installation, assurez-vous de sélectionner Apache, MySQL et phpMyAdmin.
- Installer XAMPP
- Exécutez le fichier d'installation téléchargé.
- Lors de l'installation :
- Choisissez les composants nécessaires (par défaut : Apache, MySQL, PHP, et phpMyAdmin suffisent pour un environnement basique).
- Sélectionnez un dossier d'installation (par défaut,
C:\xampp
est recommandé).
- Terminez l’installation en suivant les instructions.
- Lancer XAMPP :
- Ouvrez le Panneau de configuration XAMPP (
xampp-control.exe
) situé dans le dossier d'installation
- Démarrez les modules nécessaires en cliquant sur "Start" à côté de chaque module :
- Apache (serveur web).
- MySQL (base de données).
- Ouvrez le Panneau de configuration XAMPP (
- Accéder à phpMyAdmin :
- Une fois Apache et MySQL en cours d'exécution, ouvrez un navigateur et entrez l'URL suivante :
http://localhost/ http://localhost/phpmyadmin
- phpMyAdmin devrait s'ouvrir et afficher une interface pour gérer vos bases de données MySQL.
- Une fois Apache et MySQL en cours d'exécution, ouvrez un navigateur et entrez l'URL suivante :
Configuration de XAMPP
VOIR LA VERSION
Dans le dossier
c:\xampp
ouvrir le fichierreadme_en.txt
. Première ligne : 8.2.12
MOT DE PASSE ROOT PHPMYADMIN
L'utilisateur par défaut est
root
et le mot de passe est vide (modifiable dans le fichier de configuration)Si vous souhaitez définir un mot de passe pour l'utilisateur root (ou pour d'autres utilisateurs) :
- Dans phpMyAdmin (http://localhost/phpmyadmin), allez dans l'onglet Utilisateurs et modifiez le mot de passe de l'utilisateur
root
.
- Une fois cela fait, mettez à jour le fichier de configuration de phpMyAdmin pour que la connexion fonctionne correctement :
- Ouvrez le fichier
config.inc.php
de phpMyAdmin (généralement situé dans le dossierC:\xampp\phpMyAdmin
).
- Recherchez la ligne avec
$cfg['Servers'][$i]['password']
et ajoutez le mot de passe que vous avez défini.
- Ouvrez le fichier
- Dans phpMyAdmin (http://localhost/phpmyadmin), allez dans l'onglet Utilisateurs et modifiez le mot de passe de l'utilisateur
PORTS
- APACHE
Dans le fichier :
C:\xampp\apache\conf\httpd.conf
vérifier et/ou modifier le port en cherchantListen
:Listen 80
Si modification en 8080 par exemple il faudra accédez ensuite au serveur avec
http://localhost:8080
en précisant le numéro du port
- MySQL
Configuration dans :
C:\xampp\mysql\bin\my.ini
. Vous pouvez changer le port de MySQL qui est à 3306 par défaut.
- APACHE
TAILLE DES FICHIERS TÉLÉCHARGÉ
Dans le fichier :
C:\xampp\php\php.ini
, modifiez les paramètres comme la taille maximale des fichiers téléversés :upload_max_filesize = 50M
ACTIVER LA RÉÉCRITURE D’URL SUR APACHE
Assurez-vous que le module
mod_rewrite
est activé sur Apache. Voici comment vérifier cela sous MAMP :- Ouvrez le fichier
httpd.conf
:- Dans XAMPP, ce fichier se trouve généralement dans
C:\xampp\apache\conf\httpd.conf
.
- ou bien depuis le panneau de configuration XAMPP dans le bouton “Config” en face du service Apache
- Dans XAMPP, ce fichier se trouve généralement dans
- Recherchez et dé commentez
mod_rewrite
:- Recherchez la ligne suivante dans le fichier et upprimez le
#
au début de la ligne pour activer le module ::#LoadModule rewrite_module modules/mod_rewrite.so
- Recherchez la ligne suivante dans le fichier et upprimez le
- Activer les fichiers
.htaccess
:- Dans le même fichier, recherchez la directive
AllowOverride
et assurez-vous qu’elle est définie surAll
pour votre répertoire racine. Par exemple :<Directory "c:\xampp\htdocs\youngbank"> AllowOverride All Require all granted </Directory>
- Dans le même fichier, recherchez la directive
- Redémarrez Apache :
- Retournez dans XAMPP et redémarrez les serveurs pour appliquer les modifications.
- Ouvrez le fichier
INSTALLER VOTRE PROJET
- Placez vos fichiers dans le dossier
C:\xampp\htdocs\monprojet
- Si vous avez un projet nommé youngbank, placez-le dans
C:\xampp\htdocs\youngbank
- Accédez au projet via
http://localhost/youngbank
.
- Si vous avez un projet nommé youngbank, placez-le dans
- Voici l’arborescence du projet YoungBank
/youngbank /assets /css |-- footer.css |-- main.css /images /icones /functions |-- send_message.php /page_templates |-- accueil.php |-- mentions_legales.php |-- contact.php /template_parts |-- head.php |-- footer.php
Si vous voulez une URL
http://localhost/youngbank/accueil
au lieu dehttp://localhost/youngbank/page_templates/accueil.php
), ajoutez un fichier.htaccess
dans le dossieryoungbank
avec le contenu suivant :- Règle de réécriture dynamique qui permet de créer une logique générique qui redirige automatiquement toutes les URLs propres vers leurs fichiers correspondants
- Supposons que chaque page de votre site correspond à un fichier PHP dans le dossier
/page_templates
. Vous voulez que :http://localhost/youngbank/accueil
chargepage_templates/accueil.php
http://localhost/youngbank/contact
chargepage_templates/contact.php
- Voici le fichier htaccess avec la règle dynamique
# Activer la réécriture d'URL RewriteEngine On # Exclure le fichier send_message.php de la réécriture RewriteCond %{REQUEST_URI} !^/functions/send_message\.php$ # Ne pas réécrire les requêtes pour les fichiers dans /assets RewriteCond %{REQUEST_URI} !^/assets/ # Exclure les fichiers statiques (CSS, JS, images) RewriteCond %{REQUEST_URI} !\.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|otf)$ [NC] # Vérifie si le fichier ou le répertoire existe, sinon applique la règle de réécriture RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d # réécriture dynamique # Capture toute URL sous la forme http://localhost/youngbank/something et redirige vers page_templates/something.php RewriteRule ^(.+)$ page_templates/$1.php [L] # Gérer les sous-dossiers (comme /budget/saisie) RewriteRule ^budget/saisie/(.+)$ page_templates/budget/saisie/$1.php [L] # Rediriger vers une page d'erreur personnalisée si le fichier n'existe pas ErrorDocument 404 /page_templates/404.php
- Il faut maintenant créez un fichier
404.php
dans/page_templates
pour afficher un message d’erreur.
- Il faut maintenant créez un fichier
- Supposons que chaque page de votre site correspond à un fichier PHP dans le dossier
- Règle de réécriture dynamique qui permet de créer une logique générique qui redirige automatiquement toutes les URLs propres vers leurs fichiers correspondants
PROJET DE SITE WEB
Récupérer le projet du site sur le Drive
- le récupérer et mettre les fichiers dans htdocs de XAMPP
HTML / CSS
- Corriger le code HTML / CSS du projet récupéré sur le Drive.
Ce code a été généré par ChatGPT
- Modifier le CSS dans Chrome pour reporter les modifications dans les fichiers du projet pour les sauvegarder.
- Mettre en ligne le projet modifié via le logiciel de FTP (je le fais avec vous).
Je vous fournis un domaine et un hébergement pour le temps de la formation.
Agence digitale Parisweb.art
Tout savoir sur Julie, notre directrice de projets digitaux :
https://www.linkedin.com/in/juliechaumard/