Aller au contenu principal

Application web

Objectif​

Ce projet consiste en la création d'une application web répondant aux caractéristiques suivantes :

  • Interaction Homme-Machine reposant sur un formulaire HTML
  • Traitement des données du formulaire côté serveur

Exemples de projets​

Le choix du traitement à mettre en œuvre est libre. Voici quelques exemples de thèmes envisageables :

  • Calculs *(calculs géométriques, calculs des points pour le bac, ...)
  • Génération d'images
  • Recherche dans une "base de données" (écrite en dur dans le code ou récupérée depuis un fichier)
  • Stockage d'informations dans une "base de données" (écriture dans un fichier)

Les contraintes​

  • Travail en groupe obligatoire (entre 2 et 3 personnes)
  • Langage PHP ou Python
  • Formulaire contenant au minium :
    • un champ texte
    • une liste d'options
    • un champ boutons radio ou cases à cocher
  • Traitement des données côté serveur

Les étapes clés du projet​

  1. Faire l'exercice de démarrage version PHP
  2. Faire l'exercice de démarrage version Python
  3. Faire un choix entre le langage PHP et le langage Python
  4. Créer un formulaire simple (sans CSS) répondant aux contraintes (3 types de champs) et s'assurer d'être en mesure de récupérer les valeurs côté serveur
  5. Trouver une idée de traitement
  6. Mettre en œuvre le traitement
  7. Mettre en forme le formulaire (CSS) et ajouter de l'interactivité (Javascript)

Livrable​

Votre projet devra être transmis à l'enseignant au format zip. L'archive devra contenir :

  • Le code source du projet
  • Un court compte rendu au format PDF (maximum 2 pages) précisant :
  • Une courte description du projet
  • Le nom des membres du groupe
  • Le rôle de chaque membre du groupe
  • Une description précise de l'échange de données entre client et serveur
  • Une description du traitement mis en œuvre

Démarrage​

Étude de la version PHP​

Installation de PHP​

  1. Télécharger l'archive ZIP de la version 8.2.3 de PHP depuis la page officielle de téléchargement
  2. Décompresser l'archive ZIP
  3. Renommer le répertoire php-8.2.3-nts-Win32-vs16-x64 en php
  4. Couper/coller le répertoire php vers le répertoire Documents
  5. Lancer l'application Invite de commande
  6. Exécuter la commande ci-dessous qui permet de rendre php accessible depuis n'importe quel dossier :
set PATH=%PATH%;C:%HOMEPATH%\Documents\php
  1. Vérifier que PHP soit bien accessible en lançant la commande :
php -v
  1. Vous devez obtenir l'affichage suivant :
PHP 8.2.2 (cli) (built: Jan 31 2023 21:19:11) (ZTS Visual C++ 2019 x64)
Copyright (c) The PHP Group
Zend Engine v4.2.2, Copyright (c) Zend Technologies

Squelette de l'application​

  1. Télécharger le squelette d'application
  2. Décompresser l'archive ZIP
  3. Renommer le dossier en squelette_php
  4. Ouvrir l'ensemble des fichiers dans l'éditeur de votre choix (Notepad++, Visual Studio Code, ...)

Lancement du serveur​

  1. Lancer l'application Invite de commande
  2. Se déplacer jusqu'au dossier du squelette (en considérant qu'il soit le dossier Téléchargements)
cd C:%HOMEPATH%\Downloads\squelette_php
  1. Une fois dans le dossier, lancer un serveur PHP :
set PATH=%PATH%;C:%HOMEPATH%\Documents\php
php -d extension=C:%HOMEPATH%\Documents\php\ext\php_gd.dll -S localhost:8080
  1. Se rendre à l'adresse http://localhost:8080, une page avec pour titre Page d'accueil doit s'afficher

Exécution des traitements​

Le squelette comporte 3 traitements dont il vous faudra comprendre parfaitement le fonctionnement :

  1. Se rendre sur http://localhost:8080/exemple_traitement_1.php
  2. Un message réclamant le paramètre nom doit s'afficher
  3. Fournir une valeur au paramètre nom directement via l'URL
  4. Un message réclamant que le paramètre nom soit fourni via la méthode POST doit s'afficher
  5. Modifier la page index.php afin créer le formulaire permettant d'envoyer le paramètre nom en utilisant la méthode POST
  6. Modifier le formulaire de façon à appeler le traitement numéro 2 et observez le résultat
  7. Modifier le formulaire de façon à appeler le traitement numéro 3 et observer le résultat
  8. Expérimenter en modifiant le formulaire et les traitements afin de bien comprendre le fonctionnement de l'ensemble

Étude de la version Python​

Squelette de l'application​

  1. Télécharger le squelette d'application : Télécharger
  2. Décompresser l'archive ZIP
  3. Renommer le dossier en squelette_python
  4. Ouvrir l'ensemble des fichiers sous Thonny (ou tout autre éditeur que vous maîtrisez)

Lancement du serveur​

  1. Installer les modules Flask et Pillow
  2. Lancer le fichier server.py en passant par la console système (Outils ▸ Ouvrir la console du système...)

Exécution des traitements​

Le squelette comporte 3 traitements dont il vous faudra comprendre parfaitement le fonctionnement :

  1. Se rendre sur http://localhost:8080/exemple_traitement_1
  2. Un message réclamant le paramètre nom doit s'afficher
  3. Fournir une valeur au paramètre nom directement via l'URL
  4. Un message réclamant que le paramètre nom soit fourni via la méthode POST doit s'afficher
  5. Modifier le template templates\index.html afin créer le formulaire permettant d'envoyer le paramètre nom en utilisant la méthode POST
  6. Modifier le formulaire de façon à appeler le traitement numéro 2 et observez le résultat
  7. Modifier le formulaire de façon à appeler le traitement numéro 3 et observer le résultat
  8. Expérimenter en modifiant le formulaire et les traitements afin de bien comprendre le fonctionnement de l'ensemble