Portfolio de Boris Rendambo

Ici se trouve un explication brève du code et de comment modifier les éléments même sans être un pro de symfony.

Liens utiles

A la fin de mon stage je vais remettre à ma tutrice un dossier compréssé comprennant les dossiers avec les codes de chaque version.
Si besoin d'explications ou autres je suis joignable sur se *[serveur discord](https://discord.gg/6YFZN29r8K)*.
Langue Liens github Branche utilisé
EN https://github.com/Noctalyne/Rendambo_Portofolio version_css
FR https://github.com/Noctalyne/Rendambo_portfolio_vf.git version_css
***

Information de base

Langage utilisés

Partie du code Language + Version Applications
Front
  • Bootstrap : version 5.3.2
  • CSS
Pour Bootstrap : utilisation des fichier sources
Pour le CSS utilisation basic cf modifier le style
Back
  • PHP : v. 8.3.0
  • Framework : Symfony 7
Site coder avec le framework Symfony

Le fichier .env (non disponible sur github pour des raisons de sécurités) contient :

***

Architecture

Comprendre les différents dossiers

### Dossier ***[public](/public)*** Contient la partie back-end du code. > >
>

Dossier assets : sous dossier qui contiennent les images, les scripts et le style.

> >>
> >
>

Dossier build (à ne pas toucher)

> >>
> >
>

Fichier .htacces (à ne pas toucher)

> > >
> >
>

Fichier index.php (à ne pas toucher)

> >
### Dossier ***[src](/src)*** Contient la partie back-end du code. >
>

Dossier controller

> >> Contient les fichiers qui permet de gérer les Routes et donc la redirection. >> >> >
> >
>

Dossier Entity

> > >> Contient les entité présente en Base de données. >> >> >> >
> >
>

Dossier Form

> >> >
> >
>

Dossier Repository

> >> >
> >
>

Dossier Service

>> Contient les function de type "utilitaire" comme l'envoie des Mails >> >> >
### Dossier ***[templates](/templates)*** >Dans ce dossier on retrouve les fichiers qui gère le modèle d’affichage des pages. >Celles-ci sont au format “[.html.twig](https://twig.symfony.com/)". > + Les sous dossier > [about](/templates/about) , > [bworld](/templates/bworld) , > [contact](/templates/contact) , > [home](/templates/home) , > [legal_notices](/templates/legal_notices) , > [privacy_policy](/templates/privacy_policy) > contiennent les fichier html de leur pages respective. > > >>
>>

Dossier components

>> Contient les différents composants appeler sur le site le but est d'alléger le code. >> >>
> > + Le fichier [base.html.twig](/templates/base.html.twig) est le fichier qui contient le squelette principal. Il est utilisé pour appeler les élément sur chaque pages comme la barre de navigation ou le footer. On appel ensuite la base sur toute les pages. ### Dossier ***[translations](/translations)*** > Dans ce dossier se trouve les fichiers de traductions. (Cf. Documentation Symfony). > Chaque nom de sous-dossier fait référence à la page qu’il traduit. > > Le nom des fichiers est comme suis : >
 domains.langue.type 
> > > > > > > > > > > > > > >
domainsCe paramètre détermine le répertoire de la traduction
langueC'est le paramètre qui permet a Symfony de savoir la langue qui est traduis dans le fichier et ainsi de selectionner la traduction souhaité.
typeC'est le format du fichier (ici j'ai utiliser PHP)
> Exemple : >
>    messages.en_EN.php
>    messages.fr_FR.php
>    
> Ici il y à 2 fichiers de traduction, un pour le français et un autres pour > l'anglais. ***

Modifier des éléments

Modifier la mise en forme

Pour modifier la mise en page il faut déjà récupérer la page "html.twig" correspondante. Pour connaitre la feuille de style associé il suffit de regarder entre les balises :
{% block stylesheets %}{% endblock %}
. Puis comme dans une feuille de style classique recherché les ID ou classe. > [!TIP] > Pour aider a trouver le style d'un élément sur la page utiliser Click Droit puis "insepecter" utiliser l'outils pour trouver l'élément à modifier. Vous pouvez même tester le style en direct pour voir le rendue et ensuite modifier le fichier. Chaque fichier CSS contient le code pour l'affichage de type "ordinateur" et en bas de la page le code pour le responssive sur mobile (tester avec le widget Chrome : Mobile First ). Bootstrap est utilisé principalement pour le menu de type "burger"de la version Mobile. Mais certaines classe sont utilisé.

Pour modifier le texte

> Les textes sont quasiment tous généré par les fichiers de traductions (cf. description du dossier "translations"). >
> Commment ça fonctionne >
>

Dans les fichiers du dossier "templates" le texte est appeler de la manière suivante :

> >
{{ 'ID_REFERENCE' | trans ( [], 'domains' , 'langue' )  }}
> > >trans() est une fontion de symfony qui permet de traduire le texte il prend 3 paramètres. > > Pour que l'application connaissent la langue à afficher, j'ai crée un [controller](src/Controller/ChangeLanguageController.php). >
> Celui ci est activer lorsque l'utilisateur choisie de changer la langue en cliquant sur le drapeaux de son choix. >

>translate-btn >

>

:warning: Tant que l'utilisateur n'as pas effectuer d'action le site seras par défaut en 'en_GB' pour le site en ".com" et en 'fr_FR' pour le site en ".fr".

>

Une fois qu'il à cliquer le controller récupère la valeur attribuer au bouton et enregistre la valeur dans la session, une fois effectuer le texte change instantanément.

>

Ensuite dans chaque controller je demande à la sessions la la valeur de l'objet "lang". L'application sais ensuite qu'elle fichier prendre pour afficher le texte.

>
> >
> Modifier un élément >
>

Dans le dossier "translations" vous avez les sous dossier qui correspondent a chaques pages. Ces sous dossier contiennent chacun 1 fichier par langues.

>

Le nom des fichier sont constituer du nom de la page concerncer.

>

Pour modifier le texte il faut donc de se rendre sur la page "templates" voulue et regarder l'ID de la ligne.

>

Trouvez sa correspondance dans le fichier du dossier "translations" de la page ou du composant. Puis de modifier le texte.

>

Le code devrais ressembler à ceci : >

// Fichier : home.en_GB.php
>'home-page-title' => "Home",
>
// Fichier : home.fr_FR.php
>'home-page-title' => "Accueil",

>

Les 2 codes ci dessus permet de modifier le titre de l'onglet celon la langue choisie.

### Pour modifier les images >

Les images sont disponible dans le dossier assets/images .

### Pour modifier le formulaire >

Le formulaire est afficher grace au fichier _form.html.twig , se fichier sers juste pour la mise en forme.

>

Cette mise en forme est généré par le ficher ContactType.php grace à :

public function buildForm(): void 

>

:information_source: : Se référer à la documentation symfony pour toute modification.

***

Langue d'affichage du texte et traduction

Pour le site sur l'hébergement 'borisrendambo.com' la langue principal est l'Anglais et pour le site 'borisrendambo.fr' c'est le Français.

Ce paramètre se modifie dans le fichier translation.yaml.

Il faut changer la variable "default_locale" dans se fichier.

Langue principal Anglais Langue principal Français
default_locale: en_GB
default_locale: fr_FR

C'est aussi dans se fichier qu'on indique les routes vers les dossiers qui servent de ressources au traduction .

        paths:
            - '%kernel.project_dir%/translations'
            - '%kernel.project_dir%/translations/home'
            - '%kernel.project_dir%/translations/about'
            - '%kernel.project_dir%/translations/bworld'
            - '%kernel.project_dir%/translations/contact'
            - '%kernel.project_dir%/translations/privacy_policy'
            - '%kernel.project_dir%/translations/legal_notices'
            - '%kernel.project_dir%/translations/components/nav'
            - '%kernel.project_dir%/translations/components/footer'

Vous voyez ici toute les routes qui sont appeler par Symfony pour rechercher les traductions. Si vous rajouter de nouveaux dossier/ fichiers vous devez vérifier que ce fichier est à jour.

Pour modifier le texte lisez cette section .

Vous pouvez ajouter autant de langue que vous voulez, si tel est le cas pensez à ajuster le Controller et ajouter la langue à la liste, relier le au composant "translate.html.twig" grace a l'attribut "value" affecter au bouton. C'est cette valeur qui est stocker en session et qui définie la langue d'affichage.

***

Mise en ligne

>
> Connexion au serveur >
>

Pour se connecter au serveur vous aurez besoin des identifiants et du liens ssh du serveur (ses données seront transmise a ma tutrice mais si besoin elle sont disponible sur le site d'OVH sur la page de l'hébergement.

>

> >
> Envoie du projet sur le serveur >
>

Pour mettre en ligne le projet j'utilise un terminale WSL .

>

Grace à celui ci je peux synchronyser mon projet local avec le projet qui est sur le serveur avec la commande :

>
 rsync -av ./ rendamy-portfolio@ssh.cluster030.hosting.ovh.net:~/brg --include=public/build --include=public/.htaccess  --include=.env  --exclude-from=.gitignore --exclude=".*"
>
>

Celle ci est décomposé comme suis :

>
 rsync -av ./ [IDENTIFIANT]@[ADRESSE SSH HEBERGEMENT]:~/[DOSSIER DE DESTINATION] --include=public/build --include=public/.htaccess  --include=.env  --exclude-from=.gitignore --exclude=".*"
>
>

Avant le stage je n'avais pas fait de déploiement sur un hébergement, j'ai donc rechercher sur internet et je suis tomber sur cette vidéo .

>

Certains point ont déjà été effectuer donc pour mettre à jour le site avec votre versions vous devez suivre les étapes suivantes :

>

> :warning: : Faire attention à la langue du site (cf. Langue d'affichage du texte).

>
> >

Mise à jour des sites

>
>

Mettre à jour le site "borisrendambo.com"

>
    >
  1. Dans un premier temps il faut effectuer cette commande dans un terminal WSL :

    >
     rsync -av ./ rendamy-portfolio@ssh.cluster030.hosting.ovh.net:~/brg --include=public/build --include=public/.htaccess  --include=.env  --exclude-from=.gitignore --exclude=".*" 
  2. >
    >
  3. Si tous se passe bien il faut enssuite se rendre sur l'hébergement.

    >

    Je passe sur un terminal " bash " et je lance la commande :

    >
     ssh rendamy-portfolio@ssh.cluster030.hosting.ovh.net -p 22 
    >

    Le terminal vous demanderas le mot de passe (caractère caché pour des questions de sécurité). Une fois connecter cela vous fait accéder à la racine de l'hébergement.

    >
  4. >
    >
  5. Accéder ensuite au dossier voulue :

    >
      >
    • "/brg" pour le site en ".com"
    • >
    • "/brf" pour le site en ".fr"
    • >
    >

    avec la commande :

     cd [NOM DU DOSSIER] 

    >
  6. >
    >
  7. Une fois dans se dossier, lancer la commande : >
     ../composer.phar update 
    >
  8. >
    >
  9. Une fois composer mis à jour il va falloir modifier le fichier .env pour changer l'application en mode production. >

    Lancer la commande : >

    vim .env 

    >

    Celle ci vous permet d'ouvrir le fichier ".env", pour passer en mode "edittion" appuyer sur la touche i du clavier.

    >

    Accéder aux lignes :

    >
    > ###> symfony/framework-bundle ###
    > APP_ENV=dev
    > # APP_ENV=prod 
    >
    >

    Il faut commenter la ligne avec la valeur "dev" et décommenter la ligne avec la valeur "prod".

    >

    Pour quitter appuyer sur échap puis taper " :x " pour quitter le fichier et enregistrer les changements.

    >
  10. >
  11. Il faut ensuite vider le cache pour bien appliquer les mises à jour avec la commande : >
     php bin/console cache:clear 
    >
  12. >
>

Une fois toutes ses commandes exécuté vérifier le résultat sur le site.

>

Si tous est OK vous pouvez sortir de l'hébergement avec la commande : >

exit

>
>
>

Mettre à jour le site "borisrendambo.fr"

>
>

Faire attention à vérifier la langue du site (cf. Langue d'affichage )

>

Si tous est ok suivre le même processus que pour le site en anglais.

> >