BRETON Bryan

Rapport de StageDéveloppement d’extension WordPress

Maître de Stage : Alan Ferronnière Date du stage : 7 Janvier au 8 Mars 2019

1

Table des matières ............................................................................................................................................................... 2

REMERCIEMENTS ................................................................................................................................... 3

INTRODUCTION ...................................................................................................................................... 3

Démarches suivies : ............................................................................................................................... 4

Les outils mis à ma disposition : ............................................................................................................. 4

Pourquoi WordPress ? ............................................................................................................................ 4

Web - Graphiste – Salle – Compagnie de Danse : Un Regroupement Inédit. ......................................... 5

La mission ............................................................................................................................................... 6

Demande générale ............................................................................................................................. 6

Extensions et Templates ..................................................................................................................... 7

Génération de Flyers .......................................................................................................................... 8

Demande du client ......................................................................................................................... 8

Création du formulaire ................................................................................................................... 8

Méthode de récupération du code source .................................................................................... 8

Outil de génération de PDF ............................................................................................................. 9

Différents Types D’évènements ...................................................................................................... 9

Conclusion sur l’extension .............................................................................................................. 9

Génération de Catalogues ........ 10

Demande du client ....................................................................................................................... 10

Méthode de Travail ...................................................................................................................... 10

Conclusion sur l’extension ............................................................................................................ 11

Mise en place du travail ........................................................................................................................ 12

Difficultés rencontrées ......................................................................................................................... 18

Utilisation des extensions .................................................................................................................... 20

Progrès Effectués .................................................................................................................................. 21

Axes D’améliorations ............................................................................................................................ 21

Conclusion ............................................................................................................................................ 22

Lexique ................................................................................................................................................. 22

Annexes ................................................................................................................................................ 23

2

REMERCIEMENTS Je tiens à remercier toutes les personnes ayant fait que ce stage soit possible. Tout d'abord je tiens aremercier mon maître de stage, Mr FERRONNIERE Alan qui m'a accepté en tant que stagiaire dans ceprojet. Grâce à ses conseils, j’ai pu progresser dans plusieurs domaines et réaliser, en autonomie ouen groupe avec les autres stagiaires sur ce projet, les différentes tâches qu’il nous a confié. Jeremercie également CHATELIER Paul et TATIBOUET Anaïs pour leur esprit d'équipe et pour l’aide et letravail qu’ils ont su apporter à ce projet.

INTRODUCTION

Au cours de ma deuxième année de BTS Services Informatiques aux organisations proposée parl’école EPSI, j’ai eu l’occasion de réaliser un stage au sein de l’entreprise La Tête Dans La Toile d’unedurée de cinq semaines, du 7 Janvier 2019 au 8 Mars 2019. Dû à la durée du stage a trouvé et à monmanque d’expérience, la recherche a été très compliquée, Néanmoins, deux entreprises ont acceptésde me prendre comme stagiaire sur cette période, il a donc fallu que je fasse un choix. Il s’est portésur La Tête Dans La Toile car je pensais pouvoir plus développer mes connaissances dans le domainedu web grâce à mon maître de stage. La mission principale que l’on m’a confiée était un projetWordPress. Il fallait réaliser deux extensions WordPress pour la Salle Vasse et la Compagnie YvannAlexandre. Nous devions créer une extension capable de générer un flyer en PDF avec un choix parmides types de posts données, des posts crées aux préalables, et des templates liés aux types de postsavec au verso une image choisi par l’utilisateur d’un événement dans la salle, et une autre, pouvantgénérer un catalogue entier regroupé de plusieurs événements. Nous étions donc en collaborationavec la Salle et la compagnie, mais avec également un graphiste qui nous fournissait le rendu visuelattendu avec une police d’écriture spécifique.

3

Démarches suivies : Afin de pouvoir obtenir ce stage, j’ai dans un premier temps essayer de faire jouer mon réseau.N’ayant pas un réseau très étendu, les démarches que j’ai suivis concernant ce stage ont été vaines. Ilm’a fallu trouver une entreprise sans relation. A cause de ma faible expérience et de la durée dustage, la plupart des entreprises ne donnait pas suite a nos échanges. En revanche, une entreprise,Odiwi, m’a proposé un entretien. Avant que celui-ci eut lieu, monsieur Ferronnière a donc proposé ànos deux classes de la promo, des prendre trois à quatre stagiaires. Ayant été accepté, j’ai privilégiéce stage à celui à Odiwi.

Les outils mis à ma disposition :

Nous utilisons donc Wordpress pour notre fichier. Nous devons donc télécharger les fichiersWordpress et créer la base de données nécessaire au projet. Pour cela, avec Filezilla, noustransférons les fichiers vers notre serveur de test. Nous avons ainsi, pour chaque membre du stage,créé un compte administrateur pour avoir la possibilité d’interagir sur le site.

Notre IDE pour ce stage a été, JetBrain PHPStorm, cet IDE nous a été conseillé puisqu’il est simpled’utilisation et surtout il propose la possibilité de lié notre code en FTP à un serveur. Il possèdeégalement un dépôt Git qui permet donc d’échanger nos codes au sein même de l’IDE.

Afin de pouvoir échanger entre nous, nous avons choisi d’utiliser Microsoft Teams. Il permet dediscuter, de présenter un fil de discussion de groupe et la possibilité de stocker des fichiers.

Pour la gestion de notre projet, nous avons utilisé Microsoft Azure Devops. Nous pouvions planifierdes taches à faire. Nous pouvions gérer l’activité de cette tâche, résolu, en cours ou terminée. Nouspouvons lier notre Git dessus, il permettra donc à la fois de liés nos commits a des tâches ainsi qued’avoir la liste des push.

Nous avions, ensuite un serveur de Test, il nous a été fournis avec une base de données et tous lescodes d’accès nécessaires pour pouvoir travailler sur le serveur en temps réel.

Pourquoi WordPress ?WordPress est un CMS créé en 2003. Il permet de créer aisément ses sites web sans avoir à rédigerune ligne de code. Il est largement leader dans son domaine. En effet 60% des sites avec CMS ont étéfait avec Wordpress. Il est utilisé par 60 Millions d’utilisateurs, il peut permettre de créer tout stylede site, e-commerce, vitrine ou portfolio. Wordpress comporte également un grand nombred’extensions qui permettent de faciliter la création du site. Les extensions ont été créé par desdéveloppeurs qui ne travaillent pas pour WordPress mais qui ont eux-mêmes avec la syntaxeWordPress, créés ces extensions.

4

Web - Graphiste – Salle – Compagnie de Danse : Un Regroupement Inédit.

La compagnie Yvann Alexandre, a été créé en 1993, elle est située à la fois à Nantes et au Québec.Elle permet, la découverte au grand public de la danse contemporaine. Elle permet des échangesentres les professionnels et les amateurs, toujours dans le but du partage et du regroupement. Lacompagnie dirige des spectacles sur scène ainsi que dans la rue ou même sur des toits d’immeubles.Elle s’est développée à l’international, principalement au Québec. Cette collaboration se développeavec le programme SYNAPSES qui permet de rassembler tous les partenaires de la compagnie. Lacompagnie dirigera donc pendant 3 ans, la Salle Vasse avec le projet intitulé « les laboratoiresvivants ».

La Salle Vasse est une salle nantaise qui propose des mandats de trois ans à des professionnels, pourpouvoir développer la culture.

L’entreprise « la tête dans la toile » a été créé par Alan FERRONNIERE en 2007, il s’agit d’une SARL dedéveloppement informatique. Au sein de cette entreprise, deux activités y sont travaillées,premièrement, le développement de sites et d’application pour la plupart pour le web.Deuxièmement, la formation d’étudiants d’écoles d’ingénieurs. Elle agit pour des clients multiples,qui ne sont pas dans un domaine précis.

Morille Meriadeg est une entreprise de graphisme située à Nantes, créée il y a 15 ans.Établie à NANTES (44000), elle est spécialisée dans le secteur d'activité de la création artistiquerelevant des arts plastiques.

La compagnie veut mettre à disposition du public un catalogue rappelant chaque représentation del’année. De plus certaines représentations, choisies par la compagnie peuvent être disponibles enflyers. La compagnie, a donc proposé à La Tête Dans La Toile, la génération automatique des flyersainsi que des catalogues qui correspondent à une charte visuelle prédéfinie. Cette dernière doncproposé par un graphiste de l’entreprise Meriadeg.

Yvann Alexandre, nous a fait parvenir des maquettes des catalogues, Meriadeg, s’occupait de lapartie visuelle, quant à nous, nous nous occupions du développement des extensions Wordpresspermettant les générations automatiques.

5

La mission

Demande généraleLa compagnie Yvann Alexandre, nous a fourni quelques informations, ils avaient besoin d’organiser,pour la direction artistique de la salle Vasse, les spectacles ainsi que les lieux ou les compagniespuissent répéter. Nous devions alors créer les flyers et catalogue qui serviront d’agenda, ou serontrenseignés les dates, horaires et tarifs entre autres des évènements. D’après une maquette fournie lecatalogue serait un fascicule d’environ 40 pages, dans un souci de budget, les pages seraient en A5noires et blanches avec des jeux entre le noir et un papier coloré pour rendre le tout attractif. Il seraitaussi possible de générer une seule page du catalogue pour que les autres compagnies puissent fairela promotion de leur évènement en particulier. Le but est que ces extensions soient les plus simplesque possibles à manipuler.

Schéma explicatif de la demande du client

6

Extensions et TemplatesAvant toute chose nous devions télécharger quelques extensions :

- Yoast

Cette extension permet au site de gérer les référencements automatiquement.

- Custom Post Types UI

CPT UI nous permet de créer des types de post, nous avons dans ce projet deux typesde post, les contenus et les listes. A la création, il nous est demandé un nom et unlibellé. Une fois créé, le type de post sera visibles sur la barre de gauche WordPress.Ainsi nous avons créé des contenus, ce sont des évènements contenant une seulepage, ainsi que des listes, qui elles s’étendent sur plusieurs pages.

- Advanced Custom Fields

ACF permet d’ajouter des champs personnalisés dans nos types de post. Dans ce projet nous l’avons utilisé pour créer les formulaires de chaque type de post.

Nous avons réuni les informations demandées par la compagnie, et en avons sortis les champs nécessaires à mettre dans nos types de post. Afin de liés nos deux types

de posts, nous avons eu la possibilité d’ajouter une règle, celle-ci retiendra que les champs qui ont été créés correspondent à un type de post.

Nous devrons ensuite créer nos templates. Mais avant, nous devons les inclure dans un thème. Unthème est simple a créé. Il nous faut modifier les fichiers Wordpress. Nous devons créer un dossierdans le dossier thèmes de WordPress. Pour que tout fonctionne bien, nous devons créer quelquesfichiers à l’intérieur, une page d’accueil, « index.php », une page de fonctions, d’après la hiérarchieWordPress, « functions.php » ainsi qu’une page de style css.

Une fois cela fait, nous pouvons créer, nos templates.

Un Template est lié à un type de post. Afin de l’initialiser nous utilisons ces lignes de code :

/*

Template Name: Contenu

Template Post Type: contenu

*/

Grace a ceci, l’utilisateur pourra, a la création d’un post, choisir le template à mettre. Si aucuntemplate n’a été choisi, Wordpress présente une hiérarchie de fichier1.

Chaque template appelle un header, celui-ci appelle une feuille de style. Cela va donc permettred’avoir des affichages différents sur chaque post.

1Hiérarchie de fichier : Voir annexe page…

7

Ensuite nous pouvons créer un plugin. Pour le créer, nous avons un fichier d’initialisation dans lequelnous renseignons le nom et la description de l’extension qui sera visible sur WordPress, dans cefichier on y appelle le fichier de fonctions. Dans celui-ci, nous avons une fonction« add_menu_page » cette fonction va permettre de rendre cette extension visible, ou d’y mettre sonslug par exemple.

Nous pouvons dès à présent créer nos deux extensions.

Génération de FlyersAvant toute chose, grâce à CPT UI et a ACF, créer plusieurs posts en remplissant les formulaires quenous avions créé, nous créons des évènements, des contenus ainsi que des listes. Ces posts nousseront utiles par la suite puisque ce sont ceux-ci que nous allons générer sous forme de flyers.

Demande du clientNous créons notre première extension. Cette extension doit permettre, de créer un flyer a partir d’unpost, d’un template et d’une image qui sera au verso. On doit donc avoir un PDF composé de deuxpages. Le post avec le template sur une page et l’image au verso.

Création du formulaireAfin de faire ceci, à l’index du plugin flyers, nous allons créer une zone de sélection, avec chaque typede post ceux-ci sont récupérer dans le contexte WordPress, nous pouvons récupérer chaque type deposts créé avec CPT UI. Nous y ajoutons une autre zone de sélection, avec la liste de post que nousavons créé peu avant, de la même manière, nous les récupérons dans le contexte WordPress, et nousavons ainsi chaque post créé.

En revanche nous devons créer un système de filtrage 2 afin d’afficher seulement les postsappartenant au type de post sélectionné dans la zone de sélection de type de post (contenu ou liste).De la même manière nous avons une troisième zone de sélection avec les templates, nous pouvonsencore une fois récupérer chaque templates que nous avons créé pour boucler dessus et les afficherdans notre zone de sélection. Encore une fois nous avons filtrer les choix possibles, correspondantsaux types de post de la même façon qu’avec les posts. Une fois que l’utilisateur a choisi son post etson template. Yvann Alexandre nous a demandé d’y incorporer une image à mettre au verso. Nousavons donc ajouté un système d’upload d’image.

Méthode de récupération du code source Lorsque tous ces paramètres sont envoyés nous pouvons recréer l’url de la page web du post avec letemplate en question par de la concaténation. En effet nous avons fait en sorte que toutes les pagesrépondent à l’url

https://vasse.latetedanslephp.fr/posttype/post/?template=nomdufichierdetemplate.

Une fois que nous avons récupérer l’adresse de la page, on extrait le code source de cette dernière.Grace aux méthodes CURL. Il permet de récupérer le code source d’une page depuis son adresse.

2Filtrage en JS des zones de sélections : Voir annexe page …

8

Outil de génération de PDFNous devions trouver une librairie capable de transformer un code source en PDF. Notre maître destage, nous a dans un premier temps guidé vers TCPDF. Cette librairie nous a permis de prendre lecode d’une page web existante et le transformer en PDF. Malheureusement, TCPDF ne prenait encompte seulement dix pour cent du style. Ceci rendait donc compliqué la tâche à cause du fait quenous traitons plusieurs templates. Nous avons donc recherché plusieurs autres librairies, nous noussommes donc penchés sur HTML2PDF et WKHTMLTOPDF, ces deux librairies nous rendaient despages blanches. Nous sommes donc aller demander de l’aide a des étudiants d’années supérieures.On nous a conseillé DomPDF, nous avons essayé et DomPDF, affiche exactement en PDF le contenud’une page WEB, nous avons donc choisi DomPDF comme librairie.

Différents Types D’évènementsEn revanche, nous proposons plusieurs types de posts, les contenus qui s’affichent de cette manière,ainsi que les listes. Nous proposons les listes qui, peuvent gérer autant d’évènement que voulu maisqui passe à la page après deux ou trois évènements, suivant le template choisi. Ici c’est pour quel’utilisateur puisse mettre, sur une même page, plusieurs évènements. Nous devons donc gérer lepassage à la page tous les deux ou trois évènements suivant le template choisi3.

Nous pouvons donc ressortir le code source récupéré, et l’insérer dans DomPDF pour pouvoirrécupérer le PDF.

Nous avons ainsi une extension à WordPress qui génère par un, deux ou par trois évènements, desflyers.

Conclusion sur l’extensionNotre extension donc, affiche trois module de sélection, le premier, y proposent un choix entre tousles types de posts que nous avons créé, un deuxième, qui lui affiche un choix entre tous les postscorrespondant au type de post choisis juste au-dessus. Dans un troisième temps, nous pouvons ychoisir un template, qui encore une fois, correspondra au type de post. Nous avons un quatrièmechamp, ou nous pouvons choisir une image. Nous avons un bouton qui permet de valider leformulaire, une fois cela fait, un onglet s’ouvre, avec un PDF qui s’affiche, le PDF contient la pageweb correspondant au post, et avec le template choisi, sur la deuxième page, l’image choisi, tout celaen format A5 qui permet ainsi de faire en sorte que le PDF soit un flyer avec un évènement et un logoqui servira de pub pour l’évènement.

3Passage à la page suivante suivant le template : VOIR annexe page …

9

Formulaire de génération de flyers

Génération de Catalogues

Nous allons encore une fois, créer plusieurs posts sur le WordPress grâce aux extensions Custom PostType UI ou Advanced Custom Fields, ceux-ci seront, eux utilisés dans les catalogues.

Demande du clientLa compagnie nous a demandé de créer une deuxième extension. Cette deuxième extension permetde gérer un système de catalogue. Dans ce plugin, nous pourrions créer un catalogue avec un nom.Nous pouvons modifier ou supprimer ce dernier, ajouter des pages a l’intérieur de ce catalogue (unepage est un post (de type contenu ou liste) préalablement créé via le Wordpress) de la même façonque dans la première extension.

Nous travaillions avec un graphiste, c’est lui qui s’occupait, de la mise en place et en page ducatalogue papier, donc il nous a demandé, pour faciliter son travail, de lui transmettre un fichiercompressé contenant les fichiers PDF qui seront au sein du catalogue, plutôt que, comme convenuau lancement du stage, un simple fichier PDF regroupant tous les évènements d’un catalogue.

Méthode de TravailNous devons donc afficher chaque page des catalogues, pour cela nous devons créer une liaisonentre les tables de sorte a que chaque page appartienne à un ou a plusieurs catalogues, en effet, lesutilisateurs peuvent mettre une page dans plusieurs catalogues différents.

L’utilisateur ajoute une page en choisissant un type de post, un post et un template, de la mêmemanière, nous y avons incorporé un filtrage en Javascript de façon à ne pas pouvoir mettre untemplate ou un post qui ne correspond pas au type de post choisi aux préalables. De plus nouspouvons ajouter une classification avec un numéro de page. Nous pouvons enlever les pages d’uncatalogue, visualiser une liste de catalogue, ou une liste de page appartenant à un catalogue.

Chaque bouton, génère dynamiquement un contenu, comme un formulaire. En effet, un pluginWordPress a certaines particularités, dont celle de devoir rester dans une unique page, nous avonsdonc choisis de le faire en Javascript de telle sorte que seul le contenu voulu que nous voulons soitchoisi. Afin d’afficher les pages d’un catalogue particulier, nous avons choisi de procéder par onglets,

10

un onglet qui regroupe les catalogues ainsi qu’un deuxième avec les pages, qui est visible seulementsi nous cliquons sur le bouton de visionnage d’un catalogue.

Le but de cette extension, est, de pouvoir générer tout le catalogue, soit toutes les pages d’uncatalogue en même temps. Pour ceci, nous avons reconstruit, de la même façon que dans lapremière extension, toutes les url du catalogue dans un tableau. Nous gênerons ensuite, toujoursavec DomPDF, chaque PDF du catalogue en question. Nous créons un ZIP, nous bouclons ensuite afinque chaque fichier PDF se situe dans le ZIP.

Conclusion sur l’extensionAinsi, dans cette extension, par défaut, l’utilisateur peut voir tous les catalogues, avec un boutond’ajout de catalogue, qui ouvre le formulaire d’ajout d’un catalogue, une liste de catalogue, avecpour chaque, un de modification et de suppression qui génèrent des formulaires ainsi qu’un boutonde visualisation des pages, en cliquant nous arriveront sur un autre onglet avec les pages.

Sur cet onglet, nous avons un bouton d’ajout de page qui génère à son tour un formulaire de créationde page, ainsi, encore une fois de la modification et de la suppression qui affiche en JS lesformulaires.

Lorsque l’utilisateur, cliquera sur le bouton de génération d’un catalogue, un dossier compressé,contenant, chaque évènement en PDF sera alors téléchargé. L’utilisateur aura à sa disposition chaqueévènement séparément.

11

Affichage des catalogues et des pages d’un catalogue

12

Mise en place du travailMon maître de stage, Alan FERRONNIERE, étant enseignant à l’EPSI, nous avions, avant même lelancement du stage, le 7 janvier 2019, la mission en tête dans les grandes lignes. Lors du premier jourdu stage, nous avons parlé de la compagnie de danse et plus globalement du contexte dans lequel lestage allait se dérouler. Nous savions globalement par où commencer, et quoi faire, nous noussommes réparti le travail plutôt par nos préférences, puisqu’il y avait plutôt trois grandes partiesdans ce stage, une partie axée sur le CMS WordPress, une partie plutôt visuelle, avec la création detemplates et les liés avec des feuilles de styles. Ainsi qu’une partie plutôt axée développement PHPpur pour les fonctionnalités du Wordpress. Avant de commencer à travailler sur l’extension, quigénère automatiquement des PDF, nous avons relevé, les points communs entre les typesd’évènements à l’affichage afin de regroupés les évènements (post) en catégories (type de post).Nous avions donc séparé les évènements en : Créations, Soirée de restitutions, compagnie etregroupement de compagnies. Nous les avons triés comme ceci :

1- Création

-Titre/Nom de la création

-Artistes

-Date/heure de la représentation de la création

-Les tarifs disponibles

-Description de la création

-Disponible en flyers

-Durée

-Public ciblé

-Lien Web

-Appel ou non à la participation

-Onglet « Revoir » :

- Date/heure du « revoir »

-Tarifs disponibles du « revoir »

2- Compagnie(s)

-Nombre de compagnies

13

-Nom de la compagnie

-Compagnie amateur/pro

-Site(S) de l’artiste/compagnie

-Disponible en flyers

-Partenaires

-Description de la compagnie

-Onglet « Voir le Film » :

- Réalisateur

-Titre (« Autour du processus de création »)

-Salle/hall

-Date(s)/horaire(s)

-Site Web

-Création de la compagnie :

-Nombre de créations

-Titre de la création

-Date/horaire/durée de la représentation de la création

-Tarifs disponibles

-Lieu

3- Soirée de Restitutions

- Titre de la soirée

- Compagnies qui participent :

-Description

-Date de la soirée

-Lieu

-Durée de la restitution

-Tarifs disponibles

-Liens Web

-Disponible en flyers

4- Rassemblement de compagnies

14

- Partenaires

- Artistes réunis

- Logo

- Disponible en flyers

- Description du rassemblement

- Site(s) des artistes

-Onglet « Création » :

-Titre

-Durée

-Date/Lieu/horaires

-Tarifs disponibles

-Lien Web

-Onglet « Voir le Film » :

- Réalisateur

-Titre (« Autour du processus de création »)

-Salle/hall

-Date(s)/horaires

-Site Web

Nous avons installé WordPress, et la base de données qui va nous accompagner. Ensuite nous avonsliés nos IDE en FTP à notre serveur de test, nous avons télécharger les extensions WordPressnécessaires à la bonne progression du stage. Une fois ceci fait nous avons donc créé les formulairesdes types d’évènements créé par CPT UI, grâce à ACF, nous avons donc créé tous les champsnécessaires à chaque type d’évènements. Nous avons ensuite rempli les formulaires et créé quelquesposts qui nous permettrons de tester ensuite nos extensions. Nous avons donc ensuite créé notreplugin et avons mis en commun la façon de procéder. Nous ne savions pas que le plugin WordPressdevait se faire sur une seule et unique page. Ainsi, nous avons, pour ne pas nous marcher sur lespieds, développer sur Wordpress et en local, en local, la mission avançait très vite, puisque nouspouvions changer de page et passer des données entre elles. Hors lors des regroupements de code,rien ne fonctionnait. Il a donc fallu que chacun code sur l’extension. Le principal problème était quenous n’arrivions pas à faire voyager les données sans recharger la page. A ce moment, l’aide deMonsieur FERRONNIERE nous a été très importante, il nous a permis de réussir à filtrer les donnéesentre les boites de sélection sans avoir a recharger la page. Nous pouvons enfin envoyer leformulaire avec les informations nécessaires. Une fois que nous avons tout, nous pouvons doncenvoyer le tout a une page qui ne figure pas dans WordPress et qui pourra en générer le PDF de la

15

manière expliqué dans les parties précédentes. Nous avons perdu un temps fou concernant lalibrairie PDF à choisir, nous avons suivis beaucoup de tuto expliqués sur différents sites sur chaquelibrairie possible. Nous étions donc coincés et ne pouvions pas avancer car nous n’avions aucunrendu ou visuel sur le travail que nous avions fait. Lorsque l’on nous a parler de la libraire DomPDF,au premier essai nous avions un rendu et chaque CSS était pris en compte. Il nous fallait encoretrouver un moyen de donner a DomPDF une page web que nous recherchions, nous avons donccréer une page web de test. Nous avons mis l’ensemble de notre code html en variable et l’avons misen paramètre pour DomPDF. Nous avons donc remarqué que c’est comme cela qu’il fallait procéder.Nous avons trouvé une solution pour récupérer le code source d’une page avec son url enparamètres (CURL). Nous pouvions ensuite générer un PDF de n’importe quelle page web, il fallaittoutefois que la page soit en http plutôt que https. Nous devions trouver donc un moyen d’avoir uneurl avec tous les paramètres qui nous importes (template, post et type de post), nous avons trouvédans WordPress, comment pouvoir changer la forme de l’url en mettant les variables dont nousavions besoin pour cela. Une fois que tout cela était bon notre première extension était prête etterminée outre le design. Au-delà de la mise en place plutôt simple du travail et une avancée plutôtrapide, nous avons eu régulièrement un réajustement des consignes et nous avions besoin deprécisions sur certains axes de travail. Nous avons eu une réunion avec le graphiste le 14 Janvier. Ilnous a fournis les polices d’écriture à insérer et le style global du catalogue. De là, nous avons vu quecertaines choses demandées par le client n’étaient pas réalisables étant donné le fait que notrecatalogue se génèrerait automatiquement avec notre extension. En effet, nous avions remarqué quecertaines pages de la maquette contenaient, plusieurs évènements, pas nécessairement liés entreeux. Lors d’une réunion que nous avons eu avec les représentants de la salle Vasse, nous avons faitpart de ces soucis. Ils nous ont alors envoyés une nouvelle maquette de catalogues, or, le soucin’avait pas disparu. Nous devions donc répondre aux besoins du clients et changer de manière deprocéder. Nous avons alors simplement séparé les évènements en deux : les contenus, il s’agit d’unévènement qui, lui sera seul sur sa page. Ainsi que les listes, eux, seront plusieurs sur la page, lespages du catalogue étant au format A5, pourront au maximum accueillir trois évènements. Nousavons donc créé deux types de templates qui s’appliqueront aux listes. Liste par deux et liste partrois. Ces templates font donc un saut de page toutes les deux ou trois pages suivant le templatechoisi. Lorsque nous avions résolu le problème du nombre d’évènements par page ainsi que lagénération du PDF pour les flyers. Nous avons pu commencer à travailler sur le second. Tout commele premier nous l’avons créé, nous avons encore une fois argumenté sur le travail et l’ordre danslequel le faire puisque c’est comme si nous commencions un nouveau projet depuis le début. Nousavons remarqué, avant de commencer qu’il y avait un problème au niveau des templates, nous necomprenions pas pourquoi, nous ne pouvions pas changer de template a l’affichage. Après s’êtredocumenté sur WordPress, nous avons compris, la hiérarchie Wordpress dans les fichiers pour lestemplates (renseignés en annexes). Ainsi en modifiant, et renommant les fichiers dans notrehiérarchie, nous pouvions changer les templates de chaque posts comme nous le voulions et celafonctionnait pour les versions web et donc PDF. Nous avons donc commencé pour la deuxièmeextension, à créer des tables de base de données. Il nous fallait des tables qui stock ainsi lescatalogues et les pages. Nous devions faire en sorte que les tables soient créées seulement àl’activation du plugin et qu’elles soient ainsi supprimés à la désactivation. Pour cela nous avonstrouvé la méthode suivante.

Function myplugin_activate(){

// creation des tables et des clés etrangeres

}

Register_activation_hook(__FILE__, ‘myplugin_activate’) ;

16

Les hook vont permettre de lancer une fonction a un élément précis, ici à l’activation du plugin. Celafonctionne également lors de la désactivation. Dans notre fonction nous avons donc créé nos tablesen SQL, la syntaxe reste la même que celle du SQL basique. Ainsi, nous avons nos deux tables en plusà l’activation (respectivement wp_catalogue et wp_catalogue_page) qui se suppriment lors de ladésactivation de l’extension. Nous avons choisi de le faire à l’activation et désactivation plutôt qu’àl’installation et désinstallation pour faciliter nos tests, cela nous permet en deux clics de pouvoirtester nos bases de données, sinon nous devrions désinstaller entièrement et re télécharger toutel’extension. Une fois cela fait, nous pouvons coder notre extension de catalogue. Dans un premiertemps, nous voulions que lorsque le plugin est lancé, nous pouvions créer un nouveau catalogue, unnombre de page voulu nous serait demandé, et alors, un nombre de formulaire correspondant auchiffre inscrit s’afficheraient. Or, il y avait deux problèmes, dans un premier temps, le rechargementde la page, nous aurions eu besoin de recharger plusieurs fois la page avant même de pouvoir validerdéfinitivement. De plus cela posait un problème au niveau de l’ergonomie, l’extension n’aurait pasété agréable à manipuler ni à voir. Nous devions alors explorer une autre solution. Nous avons toutd’abord exploré le codex WordPress qui nous renseigne des syntaxes pour les requêtes à la base dedonnées au sein de Wordpress (les catalogues et pages étant en base de données). La syntaxe estdifférente de celle en PHP pur, néanmoins, une fois que nous avons compris la syntaxe, nouspouvons utiliser les requêtes avec des jointures. Pour la page principale, nous allons afficher lescatalogues de la base de la base de données. Et nous faisons un formulaire de création de catalogue,le catalogue créé s’ajoute bien dans la base de données. Nous devons donc afficher les pages d’uncatalogue lorsque l’utilisateur clique sur le bouton de visionnage. Ne pouvant pas naviguer entreplusieurs page (contexte WordPress oblige), nous devons traiter tout dans la page principale. Nousavons dans un premier temps choisi de tirer de la base de données l’intégralité des pages de tous lescatalogues et de les cachés, puis d’afficher les bonnes lors du clic. Malheureusement, monsieurFERRONNIERE nous a dit de changer de manière de faire, en effet si l’utilisateur avait créé un certainnombre de pages, nous sortirions beaucoup trop de données et ralentirait le chargement de la pageet cela ferait perdre beaucoup de temps. Ainsi nous avons essayé de recharger la page à chaque clicde visualisation. Mais d’un point de vue ergonomique, cela serait mauvais. Il faudrait que nouspuissions gérer la visualisation sans avoir à recharger/ changer de page. Nous avons remarqué quesur certaines extensions WordPress existantes, cela se faisait, via des onglets. Nous avons donc reprisl’idée et avons donc incorporé des onglets a notre extension. Sur une page nous aurions, lescatalogues et sur l’autre, les pages d’un catalogue. Nous avons réussi à faire ce système d’onglets.Nous pouvons donc, grâce, au nom de classes des catalogues, afficher les pages dans l’autre onglet,l’onglet des pages étant inaccessible si aucun catalogue n’a été sélectionné. Sur l’onglet descatalogues nous pouvons ainsi ajouter les formulaires de modification qui s’affiche dynamiquementen Javascript, nous faisons de même pour la suppression des catalogues. Nous incorporons ensuite àl’onglet des pages, l’ajout de pages au catalogue actuel et la suppression/ modification de pages déjàexistantes. Afin de rendre moins risquer la génération de catalogue, nous choisissons de créer undossier temporaire avec un nom aléatoire qui gèrera le téléchargement des pages en PDF. Le faitd’avoir un nom aléatoire permet de rendre infiniment moins risqué le fait qu’il puisse y avoir de laperte si deux personnes téléchargent le même catalogue en même temps. Les deux extensions étantfaites, nous avons réorganisé le code. Ajouter des commentaires et créé beaucoup de fichiers quicorrespondent chacun a une fonctionnalité afin d’avoir une meilleure lisibilité du code.

17

Schéma explicatif du fonctionnement des extensions.

Difficultés rencontréesCette expérience nous a causés un grand nombre de problèmes. Dans un premier temps, nous avionsmis en place un Git pour pouvoir chacun échanger et mettre à jour nos codes. Nous n’avions, chacunaucune expérience de Git, et très rapidement cela nous a été préjudiciable. Nous n’avions pas prévuun système de branche. C’est-à-dire que, chacun, durant le projet a dû travailler sur un fichierdiffèrent des autres. Le souci, se posait surtout à la fin du projet ou plutôt à la fin du développementd’une extension. A la fin, nous agissions simplement sur le fichier index de l’extension ou sur lefichier PDF qui affichait le PDF pour l’extension dite « flyers ». Autant dire que le problème était detaille lorsque nous développions des fonctionnalités différentes sur le même fichier. Nous avons doncperdu un temps fou et avons donc, à certains moments dû développer sur la même machine à tourde rôle.

Nous avons également eu des problèmes au niveau de la compréhension de certaines consignes. A lasortie de la rencontre que nous avions eu avec les représentants de la salle Vasse et le graphiste. Legraphiste nous avait fait part de son souhait de ne pas avoir un catalogue (un PDF regroupant tousles évènements) mais plutôt chaque page dans un PDF chacun. Nous avions alors déjà terminé dedévelopper l’extension des flyers. Nous avons pensé à ce moment que le plugin flyer suffisait ainsi etque notre tâche était complète. Notre maître de stage absent la journée qui a suivi, nous avionspassés la journée à peaufiner certains détails visuels de l’extension plutôt que de développer laseconde. Nous n’avions pas compris que le graphiste, voulait l’extension catalogue qui génère tousles PDF en une fois d’un catalogue prédéfini. Nous avons forcement perdu une journée entière àcause de ce problème de compréhension.

De plus, ce point a été déjà détaillée plus tôt, mais nous avons rencontré un problème, lors de lagénération du PDF. Lors de la première semaine, nous avions, sous les conseils de monsieurFERRONNIERE, utilisé la librairie TCPDF. Nous avions créé un code en local, un simple code html, riende plus simple pour faire des tests. Nous générions ensuite ce code avec la librairie et celafonctionnait particulièrement bien. Or, lorsqu’un ou deux jours plus tard, nous avons fait un bilan dela progression du stage avec notre maître de stage, il nous a, pour tester le fonctionnement de lagénération, demandé d’incorporer un peu de style. Il a demandé de changer la couleur du titre enrouge. Nous l’avons fait mais, lors de la génération du PDF, le titre restait en noir. Après un peu de

18

documentation sur la librairie en question, nous avons lus que certaines propriétés CSS étaient prisesen compte mais cela ne représente que 30% environ de toutes les propriétés utilisées. Etant donnéque notre extension fournis un choix de templates avec donc un style différent possible sur chaquepost, nous ne pouvions pas garder cette librairie. Nous avons passé (en parallèle nous travaillions surd’autres taches), pratiquement une semaine, à essayer chaque librairie, à chaque fois, soit nousrecevions une page blanche, soit, toujours un titre noir. Alors nous avons été demandés de l’aide etla librairie DomPDF nous a été conseillée. Le titre rouge était affiché et la génération fonctionnait.

Nous développions des plugins sous WordPress. Ainsi, les syntaxes étaient différentes et nousn’étions pas habitués à cela, nous avons, plusieurs fois, codé en local en PHP pur, ce que nousfaisions marchait parfaitement, mais une fois le code ajouté au projet. Rien ne fonctionnait. Lecontexte Wordpress, permet de ressortir les contenus enregistrés (post ou type de posts parexemple) plus facilement qu’en PHP mais, nous n’étions pas habitués à l’écriture. De plus nous nepouvions pas changer de page, pour pouvoir envoyer des formulaires et afficher les résultats ils nousétaient impossible de changer de page. Nous avons donc choisi de passer par des includes et doncd’inclure un fichier si un bouton avait été cliqué, et ainsi recharger la page et recevoir lesinformations d’un formulaire.

Le fait de ne pas connaître la syntaxe et la façon de faire avec WordPress, nos idées, pourtantfonctionnelles en local, en PHP, nous a fait perdre beaucoup de temps et d’espoir, en effet,enchaîner, des fonctions, qui se passent comme nous le souhaitions en local, et lorsque nous lestéléversions vers le WordPress, rien ne fonctionnait nous a parfois fait perdre nos moyens.

Nous devions utiliser un filtrage en Javascript pour éviter que les utilisateurs puissent causer desproblèmes. Comme sélectionner un post qui n’appartient pas au type de posts sectionné au-dessus.Nous avons essayé, néanmoins, nous avions un filtrage qui fonctionnait mais qui pouvait largementêtre contourné. Notre maître de stage nous a alors fournis un système de filtrage simple qu’il avaitfait. Nous l’avons donc utilisé pour permettre d’avoir un filtrage fonctionnel et sur.

En revanche, cela ne s’appliquait qu’aux champs propres à WordPress ou à ses extensions (ACF etCPT UI ici) ainsi, lorsque nous avons créé des templates qui étaient des fichiers que nous avions crééset qui n’étaient pas fournis via les extensions ou WordPress, il ne nous était alors pas possibled’accéder aux templates que nous avions créé pour les afficher dans une liste déroulante dans lesplugins. Avant, nous avions inscrit en dur le nom des templates dans la listes et l’utilisateur faisait sonchoix. Or nous devions rendre notre plugin le plus dynamique possible. Il nous fallait alors récupérerdynamiquement le nom des templates ainsi que le type de post auquel il s’applique.

Grâce à ce morceau de code, nous pouvons alors afficher dynamiquement, dans une liste déroulantel’intégralité des templates par rapport aux types de posts choisis.

Utilisation des extensions Au-delà du client, notre objectif est de pouvoir éventuellement rendre les extensions accessibles au utilisateurs WordPress. En plus du fait de partager notre travail, nous avons eu beaucoup de mal à réussir à générer du PDF. Si nous pouvions rendre notre extension disponible aux utilisateurs, tout le monde pourraient créer un site avec de la génération de PDF. Nous pourrions rendre plus simple le travail d’un nombre de gens impressionnant sans qu’ils aient à coder. Il y a toutefois un problème, notre extension prends plus de place que la taille maximale autorisée pour une extension WordPress.Nous devrions trouver une solution différente si nous voulons la rendre disponible.

19

Progrès EffectuésBien que ce stage nous ait causé quelques difficultés, le fait de les surmontés nous a permisd’effectuer beaucoup de progrès. Personnellement, je n’avais jamais travaillé sous WordPress,découvrir ce CMS qui est très rependus dans le monde du web m’a permis, de développer ma cultureweb et donc me permet de pouvoir offrir une plus large gamme de prestations. De plus,habituellement et jusqu’ici, dans 100% des cas je développais en local avec WAMP. Le fait, depouvoir transférer les fichiers sur un serveur déjà ouvert m’a donc appris comment un site pouvaitêtre créé dès le départ et mis en ligne a la fois. Ce projet, m’a permis de m’immiscer dans un groupesur une longue période, en effet mes autres stages n’étant pas en groupe, le fait d’avoir un travail degroupe sur une si longue période permet donc de développer mes compétences dans le domaine dela planification des taches et de la répartition du travail. Au cours de ce stage, les réunions avec desclients que je ne connaissais pas à également été une nouveauté, le fait de devoir répondre auxbesoins du clients quels qu’ils soient a permis de développer ma capacité de remise en question etde faire passer mon avis après la demande du client puisqu’il m’aurait été simple d’ajouter matouche en modifiant certaines demandes du client qui n’étaient pas forcement utile ou optimales.Techniquement, j’ai pu me développer sur le développement WordPress, n’ayant jamais utiliséWordPress, développer sur la syntaxe WordPress, inconnue m’a posé des problèmes mais a présent ils’agit d’une manière de développer que je maitrise. J’ai également pu développer mes compétencesen JavaScript, en effet, certaines fonctionnalités ont été faites en Javascript, les fonctions de tri ou lefait de cacher des éléments à certains moments. Certes il s’agit de peu, en comparaison avec ce quepeut faire JavaScript, mais, il s’agit toutefois d’un langage que je ne maitrisais pas jusqu’alors. J’aiégalement pu travailler à la fois mon écoute et ma capacité à expliquer puisque lors d’un travail degroupe, chacun n’a pas le même niveau dans tous les domaines et il me fallait donc expliquercertaines manipulations aux autres. A l’inverse j’ai développé mon sens de la compréhension et deremise en question sur mon niveau. A l’inverse, je ne comprenais pas certaines choses que faisaientmes camarades de stage, il a donc fallu que je leur demande comment et pourquoi avoir fait celacomma cela et donc écouter pour comprendre et développer mon niveau.

Axes D’améliorationsSi ce stage était à refaire, certaines choses auraient été différentes. Avec l’expérience que nous avonseue, nous aurions, avant de penser à commencer à développer nos extensions, nous aurions pris plusde temps pour mettre en place ce qui va autour de notre projet à commencer par notre Git. Nousavons utilisé notre Git seulement les deux premières semaines du stage. Dès que nous étions sur lemême fichiers nous procédions par clé USB pour s’échanger nos codes. Le Git fonctionnel nous auraitpermis de gagner un temps considérable sur l’ensemble du projet. En plus de cela, nous avions faitun départ, au niveau du développement du plugin flyers qui était assez impressionnant, tout ce quenous tentions fonctionnait, le problème que nous avons rencontré est que nous avons pris trop deconfiance et nous estimions que nous avions largement le temps de finir le projet a temps et avonsperdu beaucoup de temps a cause de cela puisque nous travaillions avec moins de vitesse que lors dela première semaine. Plus nous avancions plus nous remarquions que le temps que nous avionsn’étaient peut-être pas si imposant par rapport au projet. Si nous devions recommencer, nousdonnerions tout pour avoir quelque chose de fonctionnel et de terminé avant de décompresser. Jepense que nous aurions également privilégié plus de question sur la demande du client avant denous aventurer. Les soucis de compréhension nous ont fait perdre beaucoup de temps.

20

ConclusionEn conclusion, ce stage a été très bénéfique, il nous a confronter à des demandes parfois difficilesd’un client et a testé nos facultés à y répondre. Bien que difficile, ce stage a permis de développernos connaissances et de nous plonger dans la vie d’entreprise pour un client. Nous avons pu travailleren groupe pour un résultat largement positif, nous avons terminé ce projet et répondu aux besoinset demandes du client. Si ce stage était à refaire, certaines choses, avec l’expérience engrangée seraitdifférentes, mais, dans l’ensemble ce stage fut très enrichissant, avec une ambiance géniale et ungroupe soudé. Grâce a l’entraide au sein du groupe nous avons, chacun, pu développer nosconnaissances dans de nouveaux domaines, Wordpress, PHP, SQL… Echanger son code avec d’autress’avère compliqué puisque nous devons expliquer et poser les question qu’il faut, travailler engroupe m’a fait développer mon écoute et ma communication.

Ce stage, me conforte dans mon choix de carrière, à vouloir travailler dans le développement web.Ce stage me donne envie d’atteindre le monde du travail rapidement et de progresser pour pouvoirfaire de nouvelles choses. J’aimerai, dans ma prochaine expérience, professionnelle, au sein de monalternance, continuer à travailler dans le domaine du développement web.

Ce stage m’a donc été bénéfique d’un point de vue technique puisque j’ai pu développer mesconnaissances et mon niveau dans des langages et domaines. Également d’un niveau professionnelcar il me permet de me rassurer et de me conforter dans ma volonté de faire du développementweb, mon métier.

Lexique1 – FTP : File Transfer Protocol, est un protocole de communication qui permet un échange de fichiers. Dans notre expérience, entre nos machines et notre serveur de test.

2 – FileZilla : Il s’agit d’un logiciel client FTP, c’est avec lui que nous établissons notre connexion FTP. Il nous permet donc d’envoyer nos fichiers vers notre serveur et de tester nos codes.

3 – IDE : Un IDE est un éditeur de texte, c’est un logiciel qui nous permet de coder.

4 – Git : Il s’agit d’un logiciel de gestion de version. Il permet de pouvoir déposer nos codes et de leséchanger entre membres d’un même groupe.

5 – CMS c’est une catégorie de logiciels qui permettent de concevoir et de gérer des sites Web demanière dynamique.

21

AnnexesHiérarchie de fichiers WordPress pour les templates.

Cette image, illustre la hiérarchie de fichiers WordPress.

Voici notre dossier de thèmes avant le changement en contenu/ liste (il s’agit du mêmefonctionnement mais, plus de fichier ici pour illustrer).

22

Filtrage des boites de sélections en Javascript.$(function(){ $("#selectPost").attr("disabled","disabled"); //on peut pas toucher au deuxieme select

$("#selectPostType").change(function(){ if($(this).val()!=""){ //si il y a qqch dans le premier select $("#selectPost").removeAttr("disabled"); //on peut toucher au deuxieme select $("#selectPost").val(""); $("#selectPost option").show(); //montre toutes les options du #post $("#selectPost option:not(."+$(this).val()+")").hide(); // cache les options de #post //ou la class vaut pas la valeur du premier select } else{ $("#selectPost").attr("disabled","disabled"); } });});Ce code permet, de pouvoir sélectionner un évènement créé aux préalables, qui appartient au type depost sélectionné au-dessus dans une autre boite de sélection.

Passage a la page suivante suivant le templateif ($nb_tour %2 ==0){ if ($i!=count($posts)-1){ echo '<p class="saut_page"></p>'; }}?><style>.saut_page { page-break-before: always;}</style>

page-break-before nous permet de sauter une page avant l’affichage au sein du pdf. Ainsi, le but estde sauter une page pour les listes par 2, si le nombre de tour (le nombre d’évènements) est égal adeux.

23