Stage: Refonte du site d'un camping

Dernière mise à jour : 24 févr. 2022

Dans le cadre de mon stage on m'a confié la mission de faire une refonte graphique du site du Camping Les Mimosas.

Le site est réalisé en Bootstrap 5, mon maitre de stage ma conseillé d'utiliser un Template. J'ai décidé de réaliser le site en architecture MVC avec php. J'ai également fait un script htaccess pour l'URL Rewriting. Je testais le bon fonctionnement des formulaire de contact sur un domaine de test.

Compétences associées

Traiter des demandes concernant les applications

J’ai synthétisé les demandes pour la refonte du site du Camping Les Mimosas dans un petit cahier des charges. Ensuite j’ai pris en compte les attentes formulées dans le document pour réaliser la refonte graphique du site internet.

Réaliser les tests d’intégration et d’acceptation d’un service

Mettre en place son environnement d’apprentissage personnel

Durant mon stage, j’ai eu l’occasion d’appréhender de nouveaux produits tel que Bootstrap. N’ayant que très peu de connaissances au sujet de ce Framework, je me suis rapidement renseigné sur les sources d’apprentissages disponibles sur internet. Getbootstrap.com est le plus célèbre, il est clair, concis et très riche pour en apprendre plus sur Bootstrap.

Notions élémentaires de Bootstrap :

- Les classes : Bootstrap apporte un ensemble de classes prédéfinies que l’on ira ensuite ajouter à nos élément HTML pour en attribuer le style.

- Les grilles : Le Framework dispose d’un système de grille Flexbox divisée en 12 colonnes. Pour ajouter une grille, on doit d’abord ajouter un container grâce à la classe éponyme. Pour ajouter une colonne,

on ajoute la classe « col » à notre élément. On peut changer la taille de la colonne en ajoutant la classe « col-[2-12] ». Pour ajouter une ligne, on encapsule l’élément dans une classe « row ».

- Bootstrap permet de gérer l’espacement interne et les marges externes. En ajoutant la classe « m-[1- 5] » pour la marge générale, « p-[1-5] » pour la marge interne. L’ajout d’un « x » ou « y » permet de gérer seulement la marge des axes spécifiés. Pour spécifier une marge en particulier, on peut ajouter « b- » pour le bas, « t- » pour le haut, « r- » pour la droite et « l- » pour la gauche.

- Bootstrap importe également un grand nombre d’éléments déjà stylisés : boutons, boutons radio, cases à cocher, champs de saisie, liens, menus, etc.

- Utiliser ce Framework assure d’avoir un site responsive.

Développer son projet professionnel.

Avant/après de mon profil Linkedin, attestant son alimentation et le développement de mon projet professionnel.