Trip’Horizon

Le projet avait pour but de concevoir un site E-commerce, nommé Trip’Horizon, dans le cadre de mon deuxième partiel, pour ma 1ère année de Bachelor « Cycle Web et Multimédia », à MyDigitalSchool de Vannes. Pour cela, nous avions des consignes précises. Nous étions répartis par équipe de trois, à savoir un développeur, un designeur et un marketeux et nous devions réaliser ce projet en seulement 4 jours. Ma mission de développeur était donc de développer un site web E-commerce, dans le temps imparti, tout en mettant en place toutes les fonctionnalités dont le site avait besoin.

Compétences

Développement d’un
site E-commerce

Optimisation de
l’expérience utilisateur (UX)

Logiciels

Utilisation du langage HTML

Utilisation du langage CSS

Utilisation du langage JS

Utilisation du langage PHP

Utilisation du langage SQL

Développement du projet

Dans un premier temps, une mise en commun des idées a été réalisée avec mon équipe, composée de Fablec Maëlle et Bruche Julie, afin de définir le nom de la marque fictive qui est une agence de voyage en ligne, qui vend des packs de séjours surprises, pour des adultes de 18 à 25 ans. Nous avons choisi de la nommer Trip'Horizon.
Par la suite, le designer de notre groupe, Bruche Jule, a ensuite réalisé une charte graphique, comprenant le logo et la palette de couleurs, avec une prédominance de rose, de bleu et de jaune sable. De mon côté, j'ai créé le wireframe, puis la maquette sur Figma.
Pour commencer le développement, un serveur a été créé, géré par Docker, qui est un conteneur qui permet de reproduire un événement serveur, avec les fichiers docker-compose.yml et Dockerfile, à la racine du projet. Ces fichiers permettent de créer un conteneur et une image, afin de consulter le site web en local.
Pour la conception de ce site, j'ai utilisé la bibliothèque Flight, afin de le structurer, en réglant le Header et le Footer, pour le réutiliser sur chacune des pages. Vous pouvez retrouver ces structures, dans le dossier "templates" puis "parts" sur le GitHub du projet. La structure de chaque page est inscrite dans le fichier index.php, à la racine du projet.
Ensuite, la base de données (BdB) a été créée en SQL, avec un visuel sur PHP MyAdmin. La connexion à la BdB se fait par le dossier "inc", placé dans le fichier db.php.
Après, chaque page est ensuite codée en HTML et PHP dans le dossier "templates" puis "pages". La relation avec la base de données est aussi faite sur index.php.

Ce site contient donc plusieurs pages :

- Tout d'abord, la page "Accueil" avec un Hero qui contient un Call To Action (CTA) qui redirige vers les voyages, un texte accrocheur et une image attrayante, puis nous avons une box avec les différents voyages et un bouton CTA, qui permet de s'inscrire à la NewsLetter, après il y a un texte qui met en valeur la marque et pour finir, les logos des partenaires défilent grâce à une animation qui au hover, leur redonnent leur vraie couleur.
- Ensuite, la page "NewsLetter" contient juste le formulaire pour s'y inscrire.

- Puis, "Notre ADN" retrace l'histoire de la marque, expose ces valeurs et présente l'équipe qui est cachée derrière.

- Après sur la page "Nos Voyages", nous retrouvons les 4 packs voyages proposés à la vente, avec un affichage sous animation.
- Pour chaque pack, une page de détails du voyage, nommée par le nom du pack, a été développée et se compose d'un visuel avec la présentation du goodie associé qui est offert dans la vente, d'une box, qui affiche le prix par personne, d'un bouton qui permet de réserver et l'affichage du détail de ce que comprends le voyage.
- Par la suite, la page "Réservation" comprend l'avancée de la réservation, le formulaire de paiement, un questionnaire, pour créer un voyage sur-mesure et une box récapitulative.
- Enfin, la page "Contact" avec un formulaire, les coordonnées et une FAQ avec les questions et les réponses les plus fréquentes.
À partir de la maquette, j'ai mise en forme le style front-end du site, grâce au langage CSS, que vous pourrez retrouver dans les fichiers reset.css (qui permettent de réinitialiser le css automatique des navigateurs) et style.css, placé dans le dossier "css".
Ce site E-commerce a plusieurs fonctionnalités du côté "client" :

- Premièrement, la vision de l'ensemble des packs voyages proposés, mise en avant grâce à une image et un titre percutants.
- De plus, la possibilité de réserver le voyage et que cette réservation vienne s'enregistrer directement dans la base de données SQL.
- Pour finir, la sécurisation des entrées du formulaire, pour éviter au maximum les intrusions en force brute.
Ce projet m’a permis de progresser et de développer mes compétences. J'ai appris à créer l'intégralité d'un site E-commerce structuré et attractif, à coder un site E-commerce sans CMS tel que WordPress avec WooCommerce et à gérer un projet en travaillant en équipe, en respectant le délai imparti.

Recherche

Dans un premier temps, une mise en commun des idées a été réalisée avec mon équipe, composée de Fablec Maëlle et Bruche Julie, afin de définir le nom de la marque fictive qui est une agence de voyage en ligne, qui vend des packs de séjours surprises, pour des adultes de 18 à 25 ans. Nous avons choisi de la nommer Trip’Horizon.

Identité visuelle

Par la suite, le designer de notre groupe, Bruche Jule, a ensuite réalisé une charte graphique, comprenant le logo et la palette de couleurs, avec une prédominance de rose, de bleu et de jaune sable. De mon côté, j’ai créé le wireframe, puis la maquette sur Figma.

Développement

Création du serveur

Pour commencer le développement, un serveur a été créé, géré par Docker, qui est un conteneur qui permet de reproduire un événement serveur, avec les fichiers docker-compose.yml et Dockerfile, à la racine du projet. Ces fichiers permettent de créer un conteneur et une image, afin de consulter le site web en local.

Zoning du site

Pour la conception de ce site, j’ai utilisé la bibliothèque Flight, afin de le structurer, en réglant le Header et le Footer, pour le réutiliser sur chacune des pages. Vous pouvez retrouver ces structures, dans le dossier « templates » puis « parts » sur le GitHub du projet. La structure de chaque page est inscrite dans le fichier index.php, à la racine du projet.

Base de données

Ensuite, la base de données (BdB) a été créée en SQL, avec un visuel sur PHP MyAdmin. La connexion à la BdB se fait par le dossier « inc », placé dans le fichier db.php.

Pages

Après, chaque page est ensuite codée en HTML et PHP dans le dossier « templates » puis « pages ». La relation avec la base de données est aussi faite sur index.php.

Ce site contient donc plusieurs pages :

Tout d’abord, la page « Accueil » avec un Hero qui contient un Call To Action (CTA) qui redirige vers les voyages, un texte accrocheur et une image attrayante, puis nous avons une box avec les différents voyages et un bouton CTA, qui permet de s’inscrire à la NewsLetter, après il y a un texte qui met en valeur la marque et pour finir, les logos des partenaires défilent grâce à une animation qui au hover, leur redonnent leur vraie couleur.
Ensuite, la page « NewsLetter » contient juste le formulaire pour s’y inscrire.
Puis, « Notre ADN » retrace l’histoire de la marque, expose ces valeurs et présente l’équipe qui est cachée derrière.
Après sur la page « Nos Voyages », nous retrouvons les 4 packs voyages proposés à la vente, avec un affichage sous animation.
Pour chaque pack, une page de détails du voyage, nommée par le nom du pack, a été développée et se compose d’un visuel avec la présentation du goodie associé qui est offert dans la vente, d’une box, qui affiche le prix par personne, d’un bouton qui permet de réserver et l’affichage du détail de ce que comprends le voyage.
Par la suite, la page « Réservation » comprend l’avancée de la réservation, le formulaire de paiement, un questionnaire, pour créer un voyage sur-mesure et une box récapitulative.
Enfin, la page « Contact » avec un formulaire, les coordonnées et une FAQ avec les questions et les réponses les plus fréquentes.

Style du site

À partir de la maquette, j’ai mise en forme le style front-end du site, grâce au langage CSS, que vous pourrez retrouver dans les fichiers reset.css (qui permettent de réinitialiser le css automatique des navigateurs) et style.css, placé dans le dossier « css ».

Fonctionnement du site

Ce site E-commerce a plusieurs fonctionnalités du côté « client » :

Premièrement, la vision de l’ensemble des packs voyages proposés, mise en avant grâce à une image et un titre percutants.
De plus, la possibilité de réserver le voyage et que cette réservation vienne s’enregistrer directement dans la base de données SQL.
Pour finir, la sécurisation des entrées du formulaire, pour éviter au maximum les intrusions en force brute.

Conclusion

Ce projet m’a permis de progresser et de développer mes compétences. J’ai appris à créer l’intégralité d’un site E-commerce structuré et attractif, à coder un site E-commerce sans CMS tel que WordPress avec WooCommerce et à gérer un projet en travaillant en équipe, en respectant le délai imparti.