Stage de 2ème année de BTS SIO :
ZE-Company
Présentation du stage
Mon stage consiste à refondre des sites Web sur WordPress. J’utiliserais notamment l’extension Bricks qui est un CMS (Content Management System), mais également des fichiers php/Java afin de faire fonctionner certaines fonctions. Enfin, si une partie du site est stylisée directement sur Bricks, une autre partie est stylisée grâce à des fichiers scsss
Les fichiers sont stockés en local puis envoyés sur le serveur avec FileZilla.
Apparence du site
Code
Autres
Déroulement du site
Lorsque nous allons sur le site, nous arrivons sur la page d’accueil. Cette dernière se compose de plusieurs sections : Présentation de l’association, Présentation des catégories (Orlin’z Clip, 3 Minutes Chrono), Navigation rapide, Publications
Chacune des sections contient des boutons permettant de naviguer sur le site.
Un menu mobile se trouve sur la droite, permettant d’accéder directement aux autres pages du site : A propos, Les compétitions, Éditions précédentes, Nos partenaires, Staff, Faire un don, Contact.
Fonctionnement
Une grande partie du style du site web est géré directement sur Bricks, mais certaines modifications sont faites en code scss sur des fichiers à part.
La responsivité du site est également gérée directement sur Bricks. Certains détails sont cependant fait en code scss (en utilisant @media screen and (min-width :…)).
Le haut de la page d’accueil est un modèle, pouvant ainsi être changé avec un autre modèle à tout moment. Le modèle peut ainsi devenir soit un slogan « Le Festival les Invizibles revient bientôt ! » avec une case permettant à l’utilisateur de s’inscrire à la newsletter, soit un compteur « Le Festival les Invizibles revient dans » dont la date de fin peut être définie en paramètres par un admin. Ce dernier, tout comme d’autres fonctionnalitées de ce site, est implémenté en Php/Javascript.
Projet 2 : (Agence) Nocta
Apparence du site
Données dynamiques / Références
Autres
Déroulement du site
La page d’accueil consiste en une vidéo qui tourne en boucle, avec des boutons autour, permettant à l’utilisateur d’accéder aux réseaux sociaux de l’entreprise, de la contacter, de changer la langue, d’accéder au menu mobile ou bien de « scroll » vers le bas. Pour cette dernière action, l’utilisateur peut bien entendu le faire manuellement sans usage du bouton.
Ensuite, vient une page présentant l’entreprise, avec en dessous un bouton pour si l’utilisateur souhaite en savoir plus sur l’agence. Ce dernier le redirigera sur la page Qui somme-nous.
Vient ensuite une page Nos références, donnant un aperçu des références de l’agences. L’utilisateur peut choisir une catégorie de référence pour n’afficher que celles qui correspondent à cette catégorie. Il peut également appuyer sur le bouton en dessous Toutes nos références pour pouvoir afficher toutes les références.
La section Clients affiche les logos de chaque clients, avec, comme pour la section références, des boutons permettant de choisir la catégorie de clients à afficher.
Enfin, en fin de page, se trouve un formulaire de newsletter permettant au visiteur de s’y inscrire si il accepte les conditions générales et la politique de confidentialité.
Fonctionnement
Une grande partie du style du site web est géré directement sur Bricks, mais certaines modifications sont faites en code scss sur des fichiers à part.
Le bouton de langue est implémenté via Bricks, mais son design et animation est implémenté en Js.
Le fonctionnement des boutons Scroll et Back to Top sont aussi implémentés en JS.
Pour les boutons permettant d’afficher les références/logos d’une catégorie spécifique,
appel Ajax. Ce dernier appelle une fonction implémentée du côté Php qui interroge la base de données afin de savoir si il y a des références ou non (grâce à WP_Query). Si il y en a, alors un tableau est créé composé des différentes références (elles, crées dans WordPress).
Interroge la base de données pour avoir le contenu de chaque posts (titre, logo et lien vers la référence), puis créé le code HTML.
Si il n’y a pas de résultat, un affichage est retourné indiquant qu’il n’y a aucun résultat dans la catégorie sélectionnée.
Avant la requête, est lancée une fonction show_loader affichant simplement un logo de chargement pour que le visiteur comprenne que la requête est en cours d’exécution.
Créée une variable qui contient l’action (ici, la fonction Php) ainsi qu’un paramètre correspondant à l’id du bouton, permettant ainsi de récupérer les objets dont l’id (catégorie référence) corresponds.