Cindy Carrillo
1
2
Rapport de stage
pro b
Ale
xK
Ade
x os
,
sL
ero
eur m'a eux voi
h al
yp our
Me Nic ola s c
*à
rem
erc i
eme nts :
.e l Oli èmes t Jul ra vier i en cco ave r dé *à Gor c le V. p l'op our zalk t ou t r ava por te l a e , tun se c l'ag l'équip direc il, i té o u enc te u rs ed de rt e, qu'i ' Ad réa e l e lise chn x os m *à ' on t r i q q u u m on m on ed im d o nné ' Am 'a g s ta h om phib qua ge ent me , ave nd ille e cl e M , j'av me n ar igue a is ta évis l ccu Da ce i o n nel eill r ap e t , ie d por l p e o ur an s t. de s s on ig n a id e de
de s
*à
che z
*à
Cindy Carrillo
3
de
m
at
iè
re s
Rapport de stage
Ta bl e
4
07 07
INTRODUCTION L'AGENCE ADEXOS
Les locaux Organigramme Journé type
13
LE STAGE
21
LES MISSIONS
Presentation du stage
Mon arrivé chez Adexos Site web d'Adexos Site extranet de Gitem C'est quoi Wordpress ? Comment fonctionne WP Wordpress et le e-commerce Les outils de travail
Site web Adexos
Déroulement du projet
Site web Gitem
Déroulement du projet
Ma formation Bilain personnel Bilain professionnel
Cindy Carrillo
31
RAPPORT TECHNIQUE
La base de données de WP Hiérarchie des fichiers modèles Gutenberg Les Shortcodes Les Hooks Les actions Les filtres
43 45 49
Les Widgets
CONCLUSION RESUME EN ANGLAIS The company My internship Analysis
ANEXES
5
6
Rapport de stage
Cindy Carrillo
7
Introduction Le couronnement du DUT Informatique se fait par le biais d’un stage de fin d’études s’étalant sur un minimum de 10 semaines. J'envisage une carrière professionnelle dans la création pour le web. C'est pourquoi j'ai souhaité réaliser mon stage chez Adexos, une agence web spécialisée magento qui se situe dans le centre de Béthune, du 8 avril 2019 au 14 juin 2019 comme développeuse frontend. Plus largement, ce stage a été l’opportunité pour moi d’appréhender le travail en équipe avec la graphiste pour la mise en place des maquettes web et le développement PHP avec Word press. L’élaboration de ce rapport a pour principale source les différents enseignements tirés de la pratique journalière des tâches auxquelles j’étais affecté. Ce rapport présentera dans un premier temps l'agence en elle-même et son fonctionnement. Nous verrons par la suite les différents travaux réalisés lors de ce stage, et les différents obstacles qui se sont présentés. Enfin, une réflexion sera développée, sur le stage puis sur le métier de développeuse front-end.
01
L'AGENCE
8
Rapport de stage
ADEXOS Adexos est une agence web experte de la solution Magento, spécialisée dans la création numérique et le commerce digital. Elle fût fondée en octobre 2006 par trois associés : Benjamin GOSSELET Directeur Commercial
Jérôme PARFANT Directeur Conseil
Nicolas LEROY Directeur Technique
Adexos a 3 pôles d'expertises : conseil, design et développement. L’agence se situe en plein coeur de Béthune dans un superbe immeuble avec terrasse. Afin de renforcer et simplifier la communication, les bureaux sont disposés dans un open space moderne et spacieux rassemblant l’ensemble de l’équipe dans une ambiance d’entraide et conviviale. Les créateurs d'Adexos ont fondé deux entreprises pour diversifier les services proposés et avec qui ils partagent les locaux ;
Amphibee est spécialisée sur les solutions WordPress et wooCommerce. Celle-ci est une co-création des 3 directeurs d'Adexos et Olivier Gorzalka, actuelle président d'Amphibee.
Aramix a été créé pour tout ce qui concerne à la maintenance de site et astreintes qui servent le week-end pour répondre et corriger les bugs au plus vite possible.
Cindy Carrillo
Les locaux
1er étage
Souvenirs
Rez-de-chaussée
40 RUE HENRI PAD 62400 BETHUNE +33 3 21 01 42 81 bonjour@adexos.fr www.adexos.fr
L’agence compte aujourd’hui plus de 130 projets réalisés et continue d’accompagner dans les maintiens et la mise à jour de ses réalisations communes.
9
Rapport de stage
O rg a
ni gr am
m
e
10
Comment c'est une journée type ?
Lundi 9H : petit-déj café/croissant
Travail
De 12h à 14h : pausse sport (pour quelques uns), et déjeuner
Cindy Carrillo
Travail
vers 16H : petite pause gourmande
18H : ďŹ ni le travail
11
12
Rapport de stage
Cindy Carrillo
13
02
LE STAGE
14
Rapport de stage
Présentation du stage Lors de l'entretien de recrutement pour ce stage, Nicolas a montré son intérêt pour ma candidature, on a discuté de mon parcours professionnel et de ma poursuite d'études pour le web et finalement j'ai fait un test technique sur PHP et mysql d'une durée de 2 heures environ, car tel est la procédure de recrutement pour mieux filtrer les capacités des candidats. Lors de l'entretien Nicolas m'a expliqué les missions qui pourraient s'adapter le mieux selon mon profil pour le stage. Entre autres : développement front-end avec WordPress et Magento. (1) Quelques jours après j'ai reçu la bonne nouvelle pour faire mon stage chez Adexos.
Mon arrivée chez Adexos L'accueil dans l'agence dès mon premier jour était exceptionnel. J'ai démarré un lundi, donc lors du petit déjeuner, avec la plupart des employées, Nicolas m'a présenté tout le monde et je me suis présenté aussi. Ensuite j'ai été assignée à mon poste de travail et j'ai reçu ma propre tasse de café personnalisée....
...même si je ne bois que du thé.
mon post de travail
(1) Anexe : Lettre de missions de stage
Cindy Carrillo
J'ai eu aussi l'opportunité de participer au 4ème TeamBuilding de l'agence. Une sortie inoubliable à Malo-les-Bains pendant une journée avec différentes activités en équipe.
Site web d'Adexos Ma première mission consistait à refaire la plupart des pages du site web d'Adexos. On pourrait dire un renouvellement de façade pour donner un air plus recent au site. C'est ainsi que j'ai travaillé avec la graphiste. Une fois qu'elle avait réalisé la maquette d'une page, je devais la mettre en place sur le site tel qu'elle sur Wordpress.
Une fois j'avais le retour des pages déjà finis, il fallait corriger les erreurs (s'il y en avait) ou faire quelques modifications. Finalement, les pages finies à 100% passaient à production.
Quand je finisait avec une page, elle était soumise aux vérifications sur préproduction, et en attendant on passait à la page suivante.
Site extranet de Gitem Concernant le site de Gitem il s'agissait d'une plateforme exclusive pour les employés afin de gérer les différents documents, rendez-vous, gestion des magasins... La méthode de travail ressemble beaucoup à celle d'Adexos mais en un peu plus complexe car il s'agissait d'un site créé à partir de zéro, pourtant il a demandé plus de développement et connaissances sur Wordpress pour le personnaliser .
Ce projet est à la charge d'Amphibee, donc j'ai travaillé sous la surveillance d'Olivier Gorzalka, président d'Amphibee, comme je l'ai déjà mentionné.
15
16
Rapport de stage
Mais... C'est quoi WordPress ? WordPress est un système de gestion de contenu (en anglais, Content management System ou CMS) axé sur la création de tous types de page Web. À l'origine, il a acquis une grande popularité dans la création de blogs et est devenu au fil du temps l'un des principaux outils de création de pages Web commerciale. Il est développé en langage PHP pour les environnements qui exécutent MySQL et Apache, sous licence GPL et est un logiciel libre. Les causes de son énorme croissance sont, entre autres, sa licence, sa facilité d'utilisation et ses caractéristiques en tant que gestionnaires de contenu.
Un autre point à prendre en compte à propos de son succès et de son extension est la vaste communauté de développeurs et de concepteurs, chargée de la programmer dans son cœur ou de créer des add-ons (appelés plugins) et des modèles (appelés thèmes) pour la communauté. En mars 2019, il était utilisé par 33,4% des sites Internet et 60,3% de tous les sites basés sur des gestionnaires de contenu (CMS).
Cindy Carrillo
Contiennent le logiciel permettant à l'application de fonctionner et ils ne sont jamais modifiés.
Contient les plugins, les thèmes, les images et en bref représente en grande partie la configuration du site et est donc essentiel.
Le fichier wp-config.php est le fichier dans lequel se trouvent, fondamentalement, les valeurs de connexion à la base de données.
Wordpress et le e-commerce Aujourd'hui, de plus en plus d'entrepreneurs décident de créer leur propre magasin en ligne pour vendre des produits en ligne . La raison: la facilité et les énormes économies que représente la vente de vos produits sans lieu physique. Et, par-dessus tout, créer un magasin en ligne dans WordPress est gratuit.
WordPress est un outil qui fonctionne avec les plugins et la plupart d’entre eux sont gratuits . C'est le cas de WooCommerce , le plugin gratuit qui permet de créer un magasin en ligne gratuit et de vendre des produits en ligne.
17
18
Rapport de stage
Les outils de travail BrowserStack est une plate-forme de test Web et mobile en nuage qui permet aux développeurs de tester leurs sites Web et leurs applications mobiles sur des navigateurs à la demande, des systèmes d’exploitation et de véritables appareils mobiles, sans exiger que les utilisateurs installent ou maintiennent un laboratoire interne de machines virtuelles, de périphériques ou d’émulateurs.
Gulp Gulp est un task runner c’est-à-dire qu’il effectue des tâches pour vous. Dans le développement web, vous l’utiliserez pour des tâches front-end telles que : * créer un serveur web local * rafraîchir le navigateur automatiquement à chaque fois qu’un fichier est modifié * utiliser des préprocesseurs comme Sass ou LESS * optimiser des ressources comme CSS, JavaScript et les images.
Zeplin est un logiciel qui permet aux graphistes et aux concepteurs (travaillant sur Sketch et/ou Photoshop) de collaborer simplement avec les développeurs. C’est un outil disponible sous Mac et sous Windows qui permet d’importer des écrans venant de Sketch et de Photoshop.
Cindy Carrillo
Redmine Cette interface de suivi de projet est mise à disposition pour suivre les développements en cours sur les différents projets, et poster les demandes (corrections, maintenance, évolutions...). Elle permet de valider et archiver tous les échanges entre les clients et l'agence.
Gitlab Gitlab est un service Web de contrôle de versions et de développement de logiciels collaboratif basé sur Git. En plus du gestionnaire de référentiel, le service propose également l'hébergement de wikis et un système de suivi des erreurs, tous publiés sous une licence Open Source.
Slack est une plateforme collaboratif qui permet de regrouper les personnes et les informations dont on a besoin pour travailler. Services: partage de fichiers, messagerie instantanée, appels vocaux, appels de vidéoconférence, Partage d'écran, archives consultables, chaînes partagées.
de
travail
19
20
Rapport de stage
Cindy Carrillo
21
03
LES MISSIONS
22
Rapport de stage
Site Web Adexos Tous les projets d'Adexos se trouvent sur gitlab et sont hébergés chez Nexylan. Une fois obtenus les permis du projet, je l'ai installé en local. Les premières tâches que j'ai dû réaliser pour prendre le projet en main étaient, évidemment, installer tous les logiciels et outils nécessaires pour le développement.
Apache
PHP Storm
Gitkraken
FileZilla
Le site d'Adexos est sa carte de présentation et portfolio dans le web, c'est pour ça que c'est un site vitrine. Il contient la description de l'agence, les réalisations, la procédure de recrutement avec les postes recherchés et le formulaire de contact.
Cindy Carrillo
Ma mission consistait à mettre en place les nouvelles maquettes du site web se trouvant sur le site zeplin - que nous verrons plus tard -, et qui fûrent au préalable réalisées par la graphiste. C'est ainsi que j'ai commencé à connaître la structure du site et le fonctionnement du template sur wordpress car chaque projet était créé dans la section "partenaires". Ce projet travail avec la méthode Git Flow, une architecture Git permettant de séparer au maximum le travail et de toucher le moins possible à la branche Master. Cette méthode représente donc une architecture en branches. Pour commencer, on aura la branche Master au moment de l’initial commit. Ensuite, on va créer une branche Develop, qui sera la branche principale. C’est par ici que vont passer tous les commits. La branche master ne récupèrera le code de la branche develop qu’au moment d’une release, et à ce moment elle sera tag afin de différencier une version.
23
24
Rapport de stage
Déroulement du projet J'ai commencé par faire les pages des réalisations d'Adexos. Chaque réalisation représente un projet fini par l'agence avec une brève description du projet et du résultat final avec un lien vers le site web correspondant. Ces premières tâches m'ont permis de m'adapter au mode de fonctionnement du thème d'Adexos sur Wordpress pour réussir à obtenir le résultat attendu à la fois dans la version de bureau et dans la version mobile. Généralement quand j'avais des soucis avec le projet, mon collègue Alex - le créateur du site -, venait à mon secours pour m'aider et m'expliquer. Il m'a donné plusieurs coups de main, surtout au début quand je ne connaissais pas le fonctionnement de Git Flow et j'avais fait tous les commit sur la branche master et il a fallu les passer de manière correcte aux autres branches à l'aide le git Kraken et le terminal de Linux. À partir de ce moment j'ai continué avec les bons réflexes. Le site web d'Adexos est très dynamique, c'est-à-dire qu'il y a des animations dans la plupart des pages avec un effet de scroll. Pour cela j'ai utilisé les librairies 'animation.css' et 'wow.css' qui permettent d'implementer une variété d'animations d'une manière très facile en travaillant avec les classes css. Chaque page appartenait à une feature - une branche -, et au moment où la page était prête pour vérifier, elle devait être 'merged' sur la branche preprod. Pour cela, car il n'y a pas de déploiement automatisé pour le moment, il fallait passer toutes les nouveaux fichiers et les modifications manuellement avec FileZilla sur le site preprod.adexos.fr. Quand la page était approuvée pour sa publication sur production, dans ce moment-là, je pouvais fermer la feature qui, automatiquement faisait merge sur develop et ensuite ouvrir une realise et la fermer tout de suite pour merger sur master. À partir de là, je devais me déplacer sur la branche develop pour ouvrir une nouvelle feature. Comme il n'y a pas de système de depoy automatisé pour l'instant, le passage à production se fait à la main via File Zilla.
18 FEATURES REALISEES
35
JOURS INVESTIS
Cindy Carrillo
(2) Anexe : Ensembles des pages réalisées
25
26
Rapport de stage
Site Web Gitem Gitem est un magasin spécialiste dans la vente et achat du petit et gros électroménager. Ce projet est de développer une toute nouvelle plateforme extranet exclusive pour les employés de Gitem pouvant gérer diférentes fonctionnalités telles qu'un agenda, les formations, le magasin qui leur corresponde, entre autres. Dans ce cas, c'est Amphibee qui a pris en charge le développement de ce site car il est totalement fait sur Wordpress. Le site est développé sur la base du thème Woffice, un thème payant pour Wordpress, orienté spécifiquement pour les sites intranet/extranet et totalement personnalisable selon les besoins. À cause de ça, ce projet est plus complexe que celui d'Adexos car les technologies utilisés sont plus nombreuses. En plus, il faut créer les widgets, menus et fonctionnalités nécessaires qui n'existent pas dans le thème par défaut. C'est pour ça que l'on travaille avec un thème enfant pour solutionner cette problématique. Pour ce site il y avait 4 personnes qui travaillaient dessus : Olivier, Julien, Axel et moi.
Thème de base
Thème modifié
Cindy Carrillo
Déroulement du projet Ma toute première mission dans le projet était de modifier la page de Login et implémenter une fonctionnalité pour cacher et montrer le mot de passe que j'avais fait à l'aide de la librairie hideShowPassword sur JQuery. Ensuite j'ai continué avec deux autres pages : "mon agenda" et "dashboard" où j'ai dû créer des widgets qui n'existaient pas sur le thème de base. À ce moment, j'ai eu quelques difficultés par rapport au développement car je ne connaissais pas très bien le back-end de WordPress et j'ai dû me renseigner auprès de mes collègues de travail et sur internet, ce qui m'a demandé un peu plus de temps. De la même manière que pour la vérification du travail sur le site d'Adexos, avant de merger avec la branche "master" les features doivent être vérifiées par Olivier.
Un Widget, est une petite application, un petit bout de programme, qui fait une chose très simple.
Finalement, j'ai développé 2 menus qu'il fallait créer sur la version mobile, et une fois que j'avais fini le travail, au moment de la vérification, on s'est rendu compte que la maquette était un peu ambiguë alors on a parlé avec la graphiste et elle nous à expliqué le fonctionnement du menu et j'ai réalisé que j'avais inversé les menus, c'est-à-dire, j'ai créé le menu A à la place du B et vice-versa. Donc j'ai dû démarrer à nouveau et cela a été ma dernière tâche dans ce projet.
4
FEATURES REALISEES
8
JOURS INVESTIS
(3) Anexe : Ensembles de réalisations
27
28
Rapport de stage
Ma formation Pendant mon temps libre où j'étais à l'attente de l'assignation des tâches pour continuer avec le travail, j'ai suivi 2 formations de la plateforme Linkedin Learning sur vueJS car c'est un des languages de programmation front-end utilisé par l'agence. Dans ce temps j'ai programmé un petit jeu très simple avec une balle qui bougeait après chaque click du joueur et elle changeait sa position sur l'écran. L'objectif était d'obtenir le score maximum dans le temps imparti. Ensuite, pour approfondir un peu plus et comprendre le fonctionnement du language, j'ai créé une application qui affichait des équipes à l'écran et l'on pouvait ajouter des autres équipes avec ses joueurs respectifs.
Cindy Carrillo
Bilain personnel Bien que j'aie déjà eu plusieurs expériences professionnelles en Argentine, ce stage m'a permis de découvrir le monde du travail dans le web en France et m'a permis de progresser comme développeuse front-end. Pendant ces 10 semaines de travail j'ai adoré ce que je faisais, j'ai appris beaucoup sur le design avec css et scss, et le mode de fonctionnement avec WordPress et sa manière de gérer les thèmes. Cette période de stage m'a apporté une expérience enrichissante à tous les niveaux : technique, professionnel et humain. J'ai su gérer mon travail de manière autonome et efficace et je me suis vite habitué au rythme du travail et la vie en agence.
Bilain professionnel J'ai eu plusieurs retours positifs de mon travail, ce que me motivais à continuer et m'indique que l'objectif est atteint. Le site d'Adexos est renouvelé et donne une information très détaillée de ce que c'est l'agence, de son essence, et ce site montre le contenu d'une manière très dynamique et esthétique, ce qui représente parfaitement Adexos. Le site pourra encore être modifié et pour la prochaine personne qui devra faire le travail s'adaptera facilement car la structure de pages est très claire et Wordpress à une ligne d'apprentissage rapide. Selon le planning établi au début du stage, l’idée était de me présenter à la découverte de Magento, mais cela n’a finalement pas été possible car le temps de formation est trop court pour l’apprendre.
29
30
Rapport de stage
Cindy Carrillo
31
04
RAPPORT TECHNIQUE
32
Rapport de stage
La base de données de WP Le diagramme ci-dessous fournit un aperçu visuel de la base de données WordPress et des relations entre les tables créées lors de l'installation standard de WordPress. La vue d'ensemble de la table ci-dessous comprend des détails supplémentaires sur les tables et les colonnes.
Cindy Carrillo
Nom de la table
Description
wp_commentmeta
Chaque commentaire contient des informations appelées métadonnées qui sont stockées dans ce tableau.
wp_comments
Les commentaires dans WordPress sont stockés ici.
wp_links
Les wp_links détient des informations relatives aux liens entrés dans la fonction Links de WordPress.
wp_options
Les options définies dans le panneau Administration> Paramètres sont stockées dans cette table Chaque publication contient des informations appelées métadonnées qui sont stockées ici. Certains plugins peuvent ajouter leurs propres informations à ce tableau.
wp_postmeta
wp_posts
Les messages sont au cœur des données WordPress . Il est stocké dans la table wp_posts . Les pages et les éléments de menu de navigation sont également stockés dans cette table.
wp_terms
Les catégories pour les publications et les liens et les balises pour les publications se trouvent dans cette table.
wp_termmeta
Chaque terme contient des informations appelées métadonnées , qui sont stockées ici.
wp_term_relationships
Les publications sont associées aux catégories et aux balises de la table wp_terms et cette association est conservée dans la table wp_term_relationships . Les associations de liens vers leurs catégories respectives sont également conservées dans ce tableau.
wp_term_taxonomy
Ce tableau décrit la taxonomie ( catégorie , lien ou balise ) des entrées de la table wp_terms.
wp_usermeta
Chaque utilisateur contient des informations appelées métadonnées , qui sont stockées ici.
wp_users
La liste des utilisateurs est gérée ici.
33
34
Rapport de stage
Hiérarchie des fichiers modèles Quel fichier de modèle sera utilisé par WordPress pour afficher tel type de page ? Les fichiers modèles des thèmes constituent les pièces du puzzle que WordPress assemble pour afficher les pages du site. Certains modèles (les fichiers d'entête
Cindy Carrillo
ou de pied de page, par exemple) sont utilisés pour toutes les pages générées ; d'autres ne sont utilisés que sous certaines circonstances. Par exemple, si le blog est à l'adresse http://example.com/wordpress/ et qu'un visiteur charge la page http://example.com/wordpress/, WordPress cherche un fichier de modèle appelé home.php et l'utilise pour générer la page. Si home.php n'existe pas, WordPress recherche un fichier appelé index.php dans le répertoire du thème et l'utilise alors pour générer la page.
35
36
Rapport de stage
Gutenberg Gutenberg est un nouvel éditeur pour WordPress. Il porte le nom de Johannes Gutenberg, qui a inventé une presse à caractères mobiles il y a plus de 500 ans. L’éditeur visuel actuel oblige beaucoup d’entre nous à utiliser des shortcodes et du HTML pour faire fonctionner les choses. Leur but est de rendre cela plus facile, en particulier pour ceux qui débutent avec WordPress.
Pour basculer entre le mode éditeur visuel et l’éditeur de texte (code), il y a maintenant un menu déroulant en haut à gauche. Ceci permet de créer les blocs directement à partir du mode éditeur de texte.
Les Shortcodes Un shortcode est une balise de texte formatée spécialement que l'on peut placer directement dans un article ou une page de votre blog. Cette balise est automatiquement interprétée par WordPress et permet d'ajouter des fonctionnalités (une galerie image, une insertion vidéo, etc.) Pour utiliser un shortcode, il suffit de mettre son nom dans le contenu d'un article, encadré de crochets. Pour ajouter de la souplesse aux shortcodes, il est tout à fait possible de leur attribuer des paramètres utilisés par la fonction PHP lors du rendu, en rajoutant
Cindy Carrillo
des paires clés/valeur à la suite du nom du shortcode. Pour le site d'Adexos j'en ai créé plusieurs shortcodes comme celui-ci de "portfolio_img_full" pour afficher des images sur les articles avec un style prédéterminé :
shortcode sur l'article La fonction implementée dans "functions.php" prend les paramètres et ensuite construit le bloc div avec l'image et la classe si elle existe.
fonction du shortcode - functions.php
Les Hooks
Le hook est un terme générique dans WordPress utilisé comme référence, à des endroits stratégiques du noyau, pour injecter votre propre code et ajouter des comportements ou modifier le fonctionnement par défaut de WordPress. Dans WordPress, il existe deux types de points d'ancrage: Actions (Actions) et Filtres (Filters).
Les actions Une action nous permet d’exécuter nos propres fonctions à un emplacement spécifique dans la timeline de WordPress, du plug-in ou du sujet, afin d’ajouter de nouvelles fonctionnalités ou des personnalisations. Le moyen le plus générique de représenter une action est le suivant : add_action( $hook, $function );
37
38
Rapport de stage
add_action: est la fonction native de WordPress pour ajouter une action. $ hook: est le nom de l'action où nous allons injecter notre code. $ function: est le nom de la fonction que nous voulons exécuter. Nous verrons un example d'implementation dans la section "Widgets".
Les filtres Les filtres sont des fonctions auxquelles WordPress transmet des informations à un stade d'exécution. Ainsi, un filtre vous permet de manipuler des textes et des contenus avant qu'ils ne soient utilisés, par exemple, en modifiant le titre d'un article avant de les afficher à l'écran. Comme les actions, les filtres vous permettent d'exécuter vos propres fonctions, à la grande différence que le but d'un filtre est uniquement de modifier des informations. En termes simples: "donnez-moi cette information et changez-la pour celle-ci." La déclaration d'un hook de filtre est très similaire à celle d'un hook d'action, la différence est le nom de la fonction : add_filter( $tag, $function ); add_filter: est la fonction native de WordPress pour ajouter un filtre. $ tag: est le nom du filtre où nous allons injecter notre code. $ function: est le nom de la fonction que nous voulons exécuter. Pour mettre en pratique l'utilisation d'un hook de filtre, j'ai modifié le titre imprimé par WordPress lors de l'utilisation de la fonction gitem_login_form_args($args) pour changer le bouton de "Se connecter" par "Connexion" dans le formulaire du login. Dans l'image suivante je voulais changer seulement le paramètre label_log_in.
Cindy Carrillo
Donc, dans le fichier functions.php j'ai ajouté cela :
résultat final
39
40
Rapport de stage
Les Widgets Les widgets dans WordPress sont destinés à faciliter l’ajout d’éléments sur le site via une simple interface de glisser-déposer. À la pointe de la technologie, WordPress est livré avec plusieurs widgets. Ces widgets par défaut nous donnent un utilitaire de base et sont compatibles avec chaque thème de WordPress. Mais parfois, ces widgets ne suffisent pas. Dans de tels cas, la meilleure option est de créer les plugins qui vous offrent la fonctionnalité que l'on désire. On peut trouver des plugins pour la plupart des tâches typiques, mais il existe des scénarios ou même les plugins tiers ne répondent pas à nos besoins. C’est là que les widgets personnalisés sont utiles. Des widgets personnalisés doivent être créés à partir de rien. Cela donne aux utilisateurs un contrôle complet sur leur utilisation de WordPress. Dans le projet de Gitem j'ai dû créer des Widgets pour la page du Dashboard. Pour cela j'ai inséré le code suivant dans le fichier functions.php.
Ensuite, j'ai ajouté le widget à l'intérieur de la page où je voulais l'afficher, dans ce cas "page-agenda.php".
Cindy Carrillo
Dans la section de Widgets, sur Wordpress, on peut ovoir le widget créé dans lequel on peut ajouter le contenu dont on a besoin.
Et quand on va sur la page "page-agenda.php" on voit le résultat.
41
42
Rapport de stage
05 Cindy Carrillo
43
CONCLUSION Quand j'ai intégré la formation DUT Informatique, j'avais l'idée de continuer ma carrière professionnelle sur la sécurité informatique car j'avais déjà fait quelques formations sur ce sujet et j'aimais bien expérimenter un petit peu avec des outils dont je prenais connaissance. Puis, au fil du temps avec les différents projets à l'université j'ai commencé à m'intéresser plus au web design. Tout le monde remarquait ma créativité et j'aime bien quand mon travail peut être visible aux autres et apprécié. Ce n'est pas le cas de la sécurité informatique car la plupart du travail se base sur les tests, les rapports et finalement ce n'est pas ce que je m'attendais pour ce domaine. Avec la création de mon portfolio numérique et d'autres petits projets que j'avais faits, je me suis rendus compte que la création des sites web et tout le processus qui cela implique, me plaisait énormément. Donc, d'un jour à l'autre j'ai changé totalement de perspective et j'ai re orienté ma recherche du stage vers le développement web, plus spécifiquement le front-end. La formation à l'IUT m'a aidé à réussir mon stage, en partie grâce au cours de programmation web, mais il faut remarquer une petite difficulté pour prendre en main le PHP pure de Wordpress car en cours on travaille directement avec le framework Laravel. Ce stage chez Adexos ma permit de progresser énormément au niveau technique grâce aux missions que j'ai dû réaliser pendant ce temps. J'ai eu l'opportunité de voir le travail en équipe entre la conception d'un site et sa réalisation. Dans le passé j'avais déjà travaillé avec Wordpress mais d'une manière moins technique qu'au cours de cette période à l'agence. Le CMS est beaucoup plus complexe est complet de ce que j'imaginais, avec une énorme quantité de plugins et fonctionnalités que l'on peut implementer pour obtenir les résultats désirés. Finalement, le travail fait chez Adexos à réaffirmer mon choix pour la poursuite d'études dans la création pour le web et je suis très contente et très motivée pour continuer sur cette voie.
44
Rapport de stage
Cindy Carrillo
45
06
RESUME EN ANGLAIS
46
Rapport de stage
Cindy Carrillo
The company Located in Bethune and founded in 2006 by 3 friends, Adexos is a digital agency specialized in the development of e-commerce websites whose customers are mainly 'retailers' (literally 'distributors', including stores, or store complexes) . Its clients include Chronopost, Furet du Nord, Zodio and others. The core competence of this company is the creation of Magento sites, an open source platform for e-commerce in php. Indeed all current projects use this technology. There is also Symfony in previous Adexos projects. To diversify the services offered, the creative partners founded two other companies: Aramix and Amphibee. The main competence of Adexos are all those agencies that are dedicated to the development of websites, specifically in Magento, located around Bethune and Lille.
My internship During my internship I had to develop the new pages of the Adexos website and several features of the Gitem's extranet site, both based on Wordpress. I had to create widgets, hooks and shortcodes that I did not even know before. Wordpress development is based on pure PHP, which made it a bit difficult for me because I learned to develop in php with a laravel framework. I used technologies such as BrowserStack, Gulp, Zeplin, Gitlab, GitKraken and Slack.
Analysis In these 10 weeks I learned more about the structure of Wordpress sites and the development in back-end. I also progressed technically in front-end development and learned to manage animation libraries. My main difficulties were presented with the gitflow since my knowledge in git was basic and I had to learn more in depth the necessary commands to do my work and pass everything to pre-production and production. This stage allowed me to see the working world of web development, the way of working and the technologies and methods that are used in the day after day and this has motivated me even more to continue my career in creation for the web.
47
48
Rapport de stage
Cindy Carrillo
49
07
ANNEXES
50
Rapport de stage
Cindy Carrillo
Travaux chez Adexos
51
52
Rapport de stage
Cindy Carrillo
53
54
Rapport de stage
Travaux chez Gitem
Cindy Carrillo
55