Antonin Parédé | Programmation

Mes Programmations

Mes derniers projets de programmation peuvent témoigner de mes compétences et de ma détermination. 🥇

Création intégral d'un site Boutique

9/06/2023
Prestashop TPL CSS

Mon objectif :

Mon objectif, durant mon stage,était de créer un site boutique pour l'entreprise Corame. Ce projet permet à l'entreprise de pénétrer le marché en ligne afin de réaliser plus de bénéfices en vendant ses produits les moins chers sur la plateforme en ligne.

Étape 1

J'ai installé la dernière version de Prestashop sur mon ordinateur et commencé à ajouter les 79 articles que mon maître de stage m'avait confié sur le thème de base.

Visiter

Étape 2

Ensuite, j'ai réaménagé le site petit à petit pour qu'il suive la même charte graphique que le site de référence de l'entreprise. J'ai dû me plonger dans le code brut de la solution Prestashop et travailler sur certains fichiers pour personnaliser la partie front du site e-commerce.

Étape 3

J'ai manipulé les variables et créé des fonctions pour agencer le récapitulatif de commande, modifier les couleurs et les positionnements du texte descriptif de chaque produit, et réaliser de nombreux autres changements.

Étape 4

En parallèle, j'ai paramétré les nombreux modules proposés par Prestashop, ce qui m'a permis de configurer beaucoup de fonctionnalités. Comme par exemple les fonctions de livraison en définissant notamment les frais et les délais de livraison mais encore le carrousel de la page d’accueil où j’ai créé quelques bannières promettant directement certain article tout droit issue du site e-commerce.

Étape 5

J'ai eu à paramétrer des modules importants liés au paiement, ce qui m'a demandé une grande minutie dans leur configuration. En effet, ces modules sont le cœur d'une solution e-commerce et il est essentiel qu'ils soient bien réglés pour garantir la sécurité des transactions.

Étape 6

Vers la fin de ma mission, j'ai été chargé de migrer un site e-commerce existant sur un nouvel hébergement et un nouveau nom de domaine.
Une fois la migration terminée, j'ai exploité les nouvelles fonctionnalités offertes par l'hébergement, notamment la création d'une adresse mail spécial avec le nouveau nom de domaine. Cela m'a permis de lier le back office de Prestashop et d'automatiser les envois de mails pour les factures, les informations de paiement et la newsletter de l'entreprise

Étape 7

Après avoir mis mon site en ligne et corrigé tous les bugs, j'ai utilisé la Google Search Console pour indexer le site. Grâce à cette plateforme, j'ai pu travailler activement sur le référencement du site et obtenir des informations statistiques précieuses.

Création d'une plateforme communautaire

22/10/2024 en cours...
PHP / MySQL / API / HTML / CSS / JS / git

Mon objectif :

L'objectif de Ranked Crew Battle est de fournir une plateforme dédiée à l'organisation de crew battles dans le jeu Brawlhalla. Le site permet aux utilisateurs de gérer leurs clans, de consulter les classements en temps réel, d'envoyer et de recevoir des demandes de batailles, de vérifier leur participation, et de signaler les résultats des rencontres. Il vise à structurer et à simplifier l'expérience compétitive en ligne pour les joueurs et les clans, en proposant des outils adaptés pour organiser, suivre, et valider les affrontements, tout en respectant des règles claires pour assurer l'intégrité des matches.

Étape 1

J'ai conçu un plan logique pour le développement du site, en prévoyant les différentes fonctionnalités qu'il comportera en amont. Cela me permet d'anticiper la création de la base de données ainsi que la communication entre les différentes pages.

Voir sur Github Visiter

Étape 2

J'ai ensuite créé tout mon projet en local grâce à XAMPP, en le connectant à GitHub pour versionner mon travail. Une fois cela fait, j'ai commencé à effectuer des recherches concernant les API que j'allais utiliser pour ce projet.

Étape 3

J'ai utilisé l'API de Steam pour récupérer les informations du compte du joueur, puis j'ai associé ces données à l'API de Brawlhalla afin de relier les informations de Brawlhalla au compte Steam du joueur. En connectant ces deux API à mon projet, cela m'a permis de recevoir toutes les informations dont j'avais besoin pour le projet.

Étape 4

Au fur et à mesure que le projet avançait, de nouvelles idées ont émergé, ce qui m'a conduit à ajouter de plus en plus de fonctionnalités pendant le développement, afin de rendre le site plus agréable, facile à parcourir et à comprendre. C'est pourquoi, après avoir codé la fonctionnalité de base du site sans bug, j'ai décidé de structurer mon CSS sous forme de tableau de bord, afin de regrouper les informations les plus importantes au même endroit.

Étape 5

Après avoir presque tout terminé, j'ai décidé de créer une page dédiée à la documentation du site, afin que les visiteurs et utilisateurs puissent facilement se renseigner sur son utilisation.

Étape 6

La mise en ligne de mon site a été assez compliquée à cause des difficultés rencontrées avec Ionos pour l'hébergement de projets en PHP vanilla. J'ai donc décidé de me tourner vers OVH, qui était moins cher et me permettait d'héberger ce projet plus facilement. Dans la foulée, j'ai également hébergé mon propre site sur le même hébergeur, avec mon nom de domaine pointant vers mon dossier portfolio.

Étape 7

Le site est désormais en ligne, et il faut maintenant le "commercialiser" en le faisant connaître sur les serveurs Discord regroupant des futurs utilisateurs, ainsi qu'en contactant des YouTubeurs du milieu pour leur présenter le projet. Quelques clans ont déjà rejoint le site, mais l'objectif est de devenir une plateforme générant des milliers de connexions par mois pour ce jeu de niche. Je me donne encore du temps pour finaliser le projet, notamment en rendant l'intégralité du site en AJAX afin d'améliorer sa fluidité et ses performances.

La bdd

Voici la bdd du projet.

SITE WEB MMI

10/03/2023
HTML CSS Javascript PHP MySQL

Mon objectif :

*avec Quentin Picard

La refonte du site web du département d'Elbeuf est un projet ambitieux qui vise à moderniser l'image de la formation en multimédia et internet et à améliorer la visibilité de cette dernière auprès des futurs étudiants. Pour ce faire, nous avons travaillé sur la création d'une charte graphique moderne et dynamique qui reflète l'esprit de l'école et de ses enseignements.
J'ai étais épolé de Quentin Picard pour coder ce site.

Création d'un parcours utilisateur par Antonin et Quentin

Étape 1

Nous avons établi un parcours utilisateur qui va nous permettre d'établir une navigation accessible à nos cibles. Avec ce parcours utilisateur, nous pourrons créer l'architecture du site web, c'est-à-dire les différentes pages et leurs liens.
Nous avons également établi le parcours pour la partie administrative du site.
Elle permettra d'ajouter, de modifier ou bien de supprimer facilement du contenu du site web.

Visiter

Étape 2

Avant de commencer la maquette graphique, nous avons défini le wireframe afin de voir et de comprendre l'emplacement du contenu que nous allons mettre dans le site web. Nous avons fait cette maquette en mobile first pour toucher un maximum de nos cibles, mais aussi afin que la plateforme web soit multisupport et accessible à tous.

Étape 3

Après avoir créé la maquette graphique, nous étions prêts à passer à la phase de développement. Nous avons opté pour GitHub, car nous étions une équipe de deux personnes et cette plateforme nous a permis de partager notre code efficacement. GitHub nous a offert un espace collaboratif où nous avons pu créer un dépôt pour notre projet.

Site + Logiciel d'ajout de contenu

10/01/2023
HTML CSS Javascript PHP MySQL

Mon objectif :

Mon objectif était de créer un site qui permet d’afficher du contenu type Titre, texte, images placé dans une catégorie choisie au préalable.
Puis de supprimer n’importe quel contenu depuis une page d’administration du site.
Il permet au gérant du site d’ajouter et de supprimer du contenu en total liberté. Ce programme a été créé en autonomie en parallèle de ma formation.

Accueil du site programmer par Antonin Parédé

Étape 1

J’ai commencé par modifier un script intéressant trouvé sur un site partageant du code pour faire ma première page d’accueil.
J’ai donc modifié le HTML et CSS afin d’être dans un style création graphique.
Le noir dominant dans le site permet de faire ressortir les couleurs des photos ajoutées et ainsi les
mettre en valeurs.

Voir sur Github Visiter

Étape 2

Une fois ajoutées par le menu d’administration, les créations atterrissent sur une page à thème, ici “Dessin”, où elles sont positionnées de manière chronologique. (La plus récente en haut à gauche).
Les images sont placées dans des conteneurs qui adaptent leurs formes, pour un meilleur affichage.

Étape 3

Après avoir cliqué sur la photo, une zone s’ouvre et affiche les éléments.

Étape 4

La page connexion est accessible en cliquant sur les 2 barres en haut à droite de l’accueil.
Cette page envoie directement sur la page admin où l’on peut tout administrer.
(Faut-il avoir le bon mot de passe)

Étape 5

Sur la page d’administration, on y retrouve les fonctionnalités.
Nous arrivons par défaut sur le formulaire d’ajout d’un élément.
On peut facilement y ajouter un titre, Texte et Image.
Pour cela, il suffit juste de renseigner la case du haut pour définir le thème dans lequel le contenu sera ajouté.

Étape 6

En cliquant sur le bouton avec le logo de crayon, une autre page apparaît à la place de la précédente.
C’est la fonctionnalité pour supprimer le contenu.
Il suffit de sélectionner le titre du contenu que l’on veut supprimer et d'appuyer sur le bouton.
Il est possible de supprimer un élément par type de contenu simultanément.

Mon Dashboard

25/11/2022
HTML CSS Javascript PHP MySQL

Les instructions :

L’objectif était de créer un dashboard manipulant des données à l’aide d’une base de données MySQL modélisée avec des graphiques choisis au préalable pour leurs pertinences par rapport au covid-19.

Étape 1

J’ai tout d’abord commencé par structurer ma base de données MySQL pour pouvoir la connecter à ma page PHP et ainsi commencer à faire mes commandes SQL.

Voir sur Github Visiter

Étape 2

J’ai ensuite commencé par choisir une librairie qui se charge des graphiques pour pouvoir me concentrer sur ma base de données.
Chart.js était un bon choix car les données PHP ont été facile à connecter au javascript des diagrammes.

Étape 3

Tous les diagrammes préparés, il me reste plus qu'à ajouter du css pour pouvoir donner vie au dashboard.
Je me suis alors inspiré des design déjà créés sur internet.
J'ai pu récupérer un début de code libre où j'ai modifié les couleurs et la structure pour que le résultat colle parfaitement avec mes graphiques.

Étape 4

Après avoir vérifié si toutes les fonctions réagissaient bien avec le css, et ayant fini mon projet en avance, j’ai décidé d’ajouter une fonctionnalité qui permet de connecter toutes les bases de données à mon dashboard. J’ai donc ajouté un session_start pour que mes diagrammes réagissent correctement aux changements de BDD.

Ma billetterie en ligne

10/06/2022
HTML PHP MySQL

Les instructions :

Dans le cadre d'un projet, nous avons eu pour objectif de créer un site de billetterie en ligne.

Ce site doit permettre à l’utilisateur de pouvoir s’inscrire grâce à son adresse mail et de choisir le billet qu’il souhaite dans le répertoire proposé à l’aide d’une base de données.
Il y avait plusieurs paramètres à ajouter tel que l'authentification de la personne en envoyant un mail de confirmation pour l’inscription.
Il y avait aussi une fonctionnalité admin qui permettrait de changer les informations liées aux événements sur le site interagissant directement avec la base de données.

Ce projet nous a initié aux langages PHP et MySQL.

Étape 1

La première chose à faire était de créer la base de données.
Pour une billetterie, j’ai donc créé 3 tables ⇾ event, billets, user.

Voir sur Github

Étape 2

Il a fallu imaginer les connexions entre les différentes pages PHP tout en gardant les informations de la connexion avec un session_start().

Étape 3

La partie codage était la plus longue car toutes les pages ne se correspondaient pas, donc peu de réutilisation de codes déjà créés. De plus, l’option de confirmation d’adresse mail compliquait fortement la tâche de l’inscription. Ce genre de programme est essentiellement fait à partir de formulaire HTML lié avec du code PHP pour récupérer les données et les manipuler à notre guise vers notre base de données grâce à des commandes SQL.

Étape 4

Création du mode administrateur. Pour y accéder, il a fallu créer d’autres pages supplémentaires accessibles que par le compte admin. Une fois ces pages créées et liées, il manquait plus que d’y mettre toutes sortes de formulaires et codes PHP pour faire des injections ou suppressions des données de la base.

Mon site Esport

20/01/2022
HTML CSS

Les instructions :

Dans mon temps libre, j'ai créé un club Esport avec des amis qui se comporte comme une association sous loi 1901. Pour appuyer notre projet, j'ai décidé de créer un site Internet pour la structure afin d'attirer l'attention.
Pour procéder, j'ai donc choisi d'utiliser du code déjà existant (étant tout seul à savoir programmer et voulant un site assez complet) et de le reformuler à ma manière afin de faire apparaître notre propre charte graphique et de créer de nouvelles catégories.
Ce projet m'a initié aux langages HTML et CSS.

Étape 1:

J'ai premièrement regardé différents sites de grosses structures, afin de me renseigner sur ce qu'il se fait. J'ai donc choisi de m'intéresser au site https://vitality.gg qui fait partie des meilleures organisations françaises.
Une fois choisie, j'ai du donc commencé à télécharger la page d'accueil afin de décortiquer le code déjà existent, j'ai simplement supprimé le code superflu que je ne connaissais pas et testé comment le site réagissait.

Voir sur Github Visiter

Étape 2:

Une fois compris l'agencement de ce code, j'ai donc recréé une autre page html où j'ai recopié les structures les plus importantes et utiles.
J'ai donc fait de même pour le code css pour pouvoir rajouter une nouvelle charte graphique.

Étape 3:

Après avoir fini la page d'accueil, je me suis mis aux autres pages, puis les ai reliées les unes aux autres.
J'ai finalement obtenu presque une vingtaine de pages et j'en ajoute régulièrement.

Étape 4:

J'ai donc fini ce projet en les publiant sur un hébergeur de site en ligne gratuit.