Table des matières

TD7 : Projet Doodle

Cet exercice de synthèse consiste à développer une application Web permettant d'inviter des participants à des èvénements, et de recueillir leur réponse (confirmation de présence ou non).

repository github

Contraintes

L'application sera composée de deux modules :

Backend

Le backend sera constitué d'une API REST responsable de l'interrogation de la base de données (MariaDB).

Ce backend pourra être interrogé depuis le frontend web, ou depuis une application mobile.

Il sera développé en utilisant un micro-framework PHP (SLIM).

FrontEnd

Le Front sera développé en HTML/CSS, vanilla JS + Bootstrap pour la partie CSS

L'API fetch sera utilisée pour les requêtes HTTP vers l'api backend.

Fonctionnalités de l'application

Création d'un événement :

Participation à un événement :

Gestion des événements :

Organisation du travail en équipe

Backend Team :

Injection de PDO

return function (ContainerBuilder $containerBuilder) {
    $containerBuilder->addDefinitions([
        LoggerInterface::class => function (ContainerInterface $c) {
            $settings = $c->get(SettingsInterface::class);

            $loggerSettings = $settings->get('logger');
            $logger = new Logger($loggerSettings['name']);

            $processor = new UidProcessor();
            $logger->pushProcessor($processor);

            $handler = new StreamHandler($loggerSettings['path'], $loggerSettings['level']);
            $logger->pushHandler($handler);

            return $logger;
        },
        'db' => function (\Psr\Container\ContainerInterface $c) {
            $db = [
                'dbname' => 'doodle',
                'user'   => 'root',
                'pass'   => '',
                'host'   => '127.0.0.1'
            ];

            $connection = new PDO("mysql:host=" . $db['host'] . ";port=3306;dbname=" . $db['dbname'], $db['user'], $db['pass']);
            $connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $connection->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);

            return $connection;
        },
    ]);
};

Usage db

    $app->get('/', function (Request $request, Response $response) {
        $db = $this->get('db');
        $stmt = $db->query('SELECT * FROM utilisateur');
        $users = $stmt->fetchAll();
        $response->getBody()->write(json_encode($users));
        return $response->withHeader('Content-Type', 'application/json');
    });
    

Frontend Team :

const API_URL = 'http://localhost:8080/';

//Get request to the server using fetch
apiGet = async(resource) => {
    const url = `${API_URL}${resource}`;
    const response = await fetch(url);
    return await response.json();
};

//Post request to the server using fetch
apiPost = async (resource, data) => {
    const url = `${API_URL}${resource}`;
    const response = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    });
    return await response.json();
};