Portfolio-architecte-sophie-bluel

English version:

Sixth project of the OpenClassrooms "web integrator" training

Mission:

The mission was to improve the site of an interior designer with javascript by developing a system to retrieve the different works of the architect from a database and display them, create buttons to filter the works to be displayed by category. Create a functional login page to allow the architect to add or delete works once connected. Create an edit mode on the home page allowing to add or delete works via a modal window.

Expected deliverables:

Home page:

  • Works must be dynamically retrieved from the database.

  • Filter buttons to display works by category, a "All" button, an "Objects" button, an "Apartments" button and a "Hotels & restaurants" button.

  • Display an "Edit mode" banner at the top of the page when the user is logged in as well as edit buttons to open a modal to add or remove works.

Login page:

  • A connection page communicating with the database, with an error message in case of connection failure and a redirect to the home page in case of success.

Modal window

  • A modal window displaying all works and allowing them to be deleted.

  • A modal window for adding works with a photo, title and category.

Photos of the functional site:

2023-07-28_17-13

2023-07-28_17-14

2023-07-28_17-14_1

2023-07-28_17-15

2023-07-28_20-43

2023-07-28_17-16

Version française:

Sixième projet de la formation "intégrateur web" OpenClassrooms

Mission:

La mission était d'améliorer le site d'un architecte d'intérieur avec javascript en développant un système pour récupérer les différents travaux de l'architecte à partir d'une base de données et les afficher, créer des boutons pour filtrer les travaux à afficher par catégorie. Créez une page de connexion fonctionnelle pour permettre à l'architecte d'ajouter ou de supprimer des travaux une fois connecté. Créez un mode d'édition sur la page d'accueil permettant d'ajouter ou de supprimer des travaux via une fenêtre modale.

Livrables attendus :

Page d'acceuil:

  • Les travaux doivent être extraits dynamiquement de la base de données.

  • Des boutons filtre pour afficher les emplois par catégorie, un bouton "Tous", un bouton "Objets", un bouton "Appartements" et un Bouton "Hôtels & restaurants".

  • Afficher une bannière "Mode édition" en haut de page lorsque l'utilisateur est connecté ainsi que des boutons d'édition pour ouvrir une modale afin d'ajouter ou supprimer des travaux.

Page de connection:

  • Une page de connection communiquant avec la base de donné, avec un message d'erreur en cas d'échec de connection et une rediretion sur la page d'acceuil en cas de succès.

Fenêtre modale

  • Une fenêtre modale affichant tous les travaux et permettant de les supprimer.

  • Une fenêtre modale permettant d'ajouter des travaux avec une photo, un titre et une catégorie.

Photos du site fonctionnel :

2023-07-28_17-13

2023-07-28_17-14

2023-07-28_17-14_1

2023-07-28_17-15

2023-07-28_20-43

2023-07-28_17-16