sio:bloc2:td7

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Prochaine révision
Révision précédente
sio:bloc2:td7 [2024/07/02 01:15] – créée jcheronsio:bloc2:td7 [2024/07/02 15:54] (Version actuelle) – [Frontend Team :] jcheron
Ligne 2: Ligne 2:
  
 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).  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). 
 +
 +[[https://github.com/supavenir/doodle-all|repository github]]
 +
  
  
Ligne 12: Ligne 15:
 Ce backend pourra être interrogé depuis le frontend web, ou depuis une application mobile. Ce backend pourra être interrogé depuis le frontend web, ou depuis une application mobile.
  
-Il sera développé en utilisant PHP objet.+Il sera développé en utilisant un micro-framework PHP (SLIM).
  
 ==== FrontEnd ==== ==== FrontEnd ====
 Le Front sera développé en HTML/CSS, vanilla JS + Bootstrap pour la partie CSS 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 ===== ===== Fonctionnalités de l'application =====
Ligne 27: Ligne 32:
 ==== Gestion des événements : ==== ==== Gestion des événements : ====
   * CRUD pour les événements (création, lecture, mise à jour, suppression)   * CRUD pour les événements (création, lecture, mise à jour, suppression)
 +
 +
 +===== Organisation du travail en équipe =====
 +
 +==== Backend Team : ====
 +  * Mise en place de l'API REST
 +  * Création des routes et des contrôleurs
 +  * Gestion de la base de données
 +
 +=== Injection de PDO ===
 +
 +<sxh php;title:app/dependencies.php>
 +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;
 +        },
 +    ]);
 +};
 +</sxh>
 +
 +=== Usage db ===
 +
 +<sxh php;title:app/routes.php>
 +    $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');
 +    });
 +    </sxh>
 +
 +==== Frontend Team : ====
 +  * Création des formulaires et de l'interface utilisateur
 +  * Intégration avec l'API via Fetch API
 +  * Gestion des interactions et des réponses des utilisateurs
 +
 +<sxh js;>
 +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();
 +};
 +</sxh>
  
  
  • sio/bloc2/td7.1719875703.txt.gz
  • Dernière modification : il y a 9 mois
  • de jcheron