| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| sio:bloc2:td7 [2024/07/02 01:21] – [Gestion des événements :] jcheron | sio:bloc2:td7 [2024/07/02 15:54] (Version actuelle) – [Frontend Team :] jcheron |
|---|
| |
| 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]] |
| | |
| |
| |
| ==== 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 ===== |
| * Création des routes et des contrôleurs | * Création des routes et des contrôleurs |
| * Gestion de la base de données | * 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 : ==== | ==== Frontend Team : ==== |
| * Création des formulaires et de l'interface utilisateur | * Création des formulaires et de l'interface utilisateur |
| * Intégration avec l'API via Fetch API | * Intégration avec l'API via Fetch API |
| * Gestion des interactions et des réponses des utilisateurs | * 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> |
| |
| |
jcheron