Miamiam

Date

Janvier 2024 - Avril 2024

Date

Janvier 2024 - Avril 2024

Techs

Symfony , Vue , MySQL , API , TailwindCSS

Miamiam est un petit projet de restaurant en ligne. Il a été réalisé avec Symfony 7, Vue et une base de données MySQL.

Miamiam est un site réalisé dans le cadre d’un projet scolaire pour le BTS SIO. Le principe est simple, c’est un site de restauration en ligne où le client peut commander des plats et des administrateurs peuvent gérer le site.

Tout d’abord, la base de données de Miamiam possède 6 tables différentes pour gérer le back-end du site : cart_item (qui contient les éléments ajoutés dans les paniers des différents utilisateurs), category (qui contient les différents groupes de plats, par exemple Burgers, ou Desserts), food (les différents plats), order_detail (pour attribuer des plats dans les différentes commandes), order (qui gère toutes les informations de commandes) et enfin, user (qui contient les comptes qu’ils soient clients ou administrateurs).

Le projet se divise en deux parties : - un back-end réalisé à l’aide de Symfony (un framework PHP) et d’une base de données MySQL. - un front-end réalisé avec Vue.js

Le back-end est donc une API qui dispose de plusieurs routes qui vont être utilisées par le front-end pour effectuer différentes requêtes comme récupérer des données de la base de données ou en ajouter. L’interaction entre le serveur et la base de données se fait via Doctrine, un ORM (object-relational mapping) qui permet de se passer du langage SQL pour effectuer les requêtes vers la base et simuler une base de données orientée objet.

Voici un exemple de route de l’API

            #[Route('/api/foods', name: 'getFoods', methods: ['GET'])]
    public function getFoodList(FoodRepository $foodRepository, SerializerInterface $serializer): JsonResponse
    {
        // filter if query name is set else return all foods
        if (isset($_GET['name'])) {
            // if includes name in category name like %name%
            $foodList = $foodRepository->createQueryBuilder('f')
                ->where('f.name LIKE :name')
                ->setParameter('name', '%' . $_GET['name'] . '%')
                ->getQuery()
                ->getResult();
        } else {
            $foodList = $foodRepository->findAll();
        }

        $jsonFoodList = $serializer->serialize($foodList, 'json', ['groups' => 'foodList']);

        return new JsonResponse($jsonFoodList, Response::HTTP_OK, [], true);
    }

Cette route à l’adresse /api/foods permet de renvoyer au client une liste de tout les aliments disponibles sur le site en format JSON et même de filtrer par nom pour ajouter une fonctionnalité de recherche sur le front-end.

Image du projet — Toutes les routes ont été testées avec Postman

Le front-end quant à lui est un site web développé avec Vue.js. Le site est plutôt simple et utilise pour la partie visuelle Tailwind pour le CSS et ShadcnUI qui est une librairie de composants UI.

L’utilisateur peut se connecter et effectuer plusieurs actions qui correspondent à celles qu’on pourrait effectuer sur un site web de restaurant classique comme Uber Eats ou Deliveroo. Ainsi, l’utilisateur peut ajouter divers plats à son panier, le modifier, et passer une commande en renseignant ses informations.

Ensuite, il y’a la partie administrateur où ceux-ci peuvent s’occuper de la gestion de Miamiam. Ils peuvent modifier les informations des utilisateurs, des catégories de plats, des plats, et des commandes.