Différences
Ci-dessous, les différences entre deux révisions de la page.
| 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 | ||
|---|---|---|---|
| Ligne 2: | Ligne 2: | ||
| Cet exercice de synthèse consiste à développer une application Web permettant d' | Cet exercice de synthèse consiste à développer une application Web permettant d' | ||
| + | |||
| + | [[https:// | ||
| + | |||
| Ligne 16: | Ligne 19: | ||
| ==== 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' | ===== Fonctionnalités de l' | ||
| Ligne 35: | Ligne 40: | ||
| * 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; | ||
| + | return function (ContainerBuilder $containerBuilder) { | ||
| + | $containerBuilder-> | ||
| + | LoggerInterface:: | ||
| + | $settings = $c-> | ||
| + | |||
| + | $loggerSettings = $settings-> | ||
| + | $logger = new Logger($loggerSettings[' | ||
| + | |||
| + | $processor = new UidProcessor(); | ||
| + | $logger-> | ||
| + | |||
| + | $handler = new StreamHandler($loggerSettings[' | ||
| + | $logger-> | ||
| + | |||
| + | return $logger; | ||
| + | }, | ||
| + | ' | ||
| + | $db = [ | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ]; | ||
| + | |||
| + | $connection = new PDO(" | ||
| + | $connection-> | ||
| + | $connection-> | ||
| + | |||
| + | return $connection; | ||
| + | }, | ||
| + | ]); | ||
| + | }; | ||
| + | </ | ||
| + | |||
| + | === Usage db === | ||
| + | |||
| + | <sxh php; | ||
| + | $app-> | ||
| + | $db = $this-> | ||
| + | $stmt = $db-> | ||
| + | $users = $stmt-> | ||
| + | $response-> | ||
| + | return $response-> | ||
| + | }); | ||
| + | </ | ||
| + | |||
| ==== Frontend Team : ==== | ==== Frontend Team : ==== | ||
| * Création des formulaires et de l' | * Création des formulaires et de l' | ||
| * 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 = ' | ||
| + | |||
| + | //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: ' | ||
| + | headers: { | ||
| + | ' | ||
| + | }, | ||
| + | body: JSON.stringify(data) | ||
| + | }); | ||
| + | return await response.json(); | ||
| + | }; | ||
| + | </ | ||