Examen du 22/04/2024 de Programmation web 2

Consignes

Vous avez 1h30 pour réaliser cet examen. Vous devez rendre votre travail sur Gitlab.

Vous avez le droit de consulter :

• vos notes de cours
• le cours
• votre projet
• internet

Il est interdit d'utiliser des IAs !

Pour récupérer l'examen, commencez par forker ce projet en cliquant sur le bouton en haut à droite de la page du projet :

Vous arrivez alors sur cette page :

/!\ Attention /!\ : Ajoutez bien le projet à votre namespace personnel (ici, marco). Pour la partie Project slug, vous pouvez laisser le nom par défaut.

Vous devrez ensuite ajouter le professeur en tant que membre de votre projet. Pour cela, allez dans Manage > Members > Invite members et ajoutez le professeur avec le rôle Maintainer.

Le projet est alors rattaché à votre compte Gitlab. Vous devrez ainsi faire un clone de ce projet qui est rattaché à VOTRE COMPTE !

Exemple :

git clone git@git.unistra.fr:<mon-username>/examen-22-04-2024.git

... ou si vous n'avez pas configuré votre clé SSH :

git clone https://git.unistra.fr/<mon-username>/examen-22-04-2024.git

Questions (25 points)

L'ensemble des questions est sur 25 points, la note sera ramenée sur 20 avec un produit en croix.

Ci-dessous, veuillez trouver :

• une description sommaire de chaque question. Pour plus de détails, référez-vous aux commentaires dans les fichiers correspondants.
• des questions auxquelles vous devrez répondre directement dans ce fichier, sous chaque question. Pour ces questions, NE PAS FAIRE de copier/coller d'internet, merci de donner des réponses avec vos propres mots, même si elles sont moins précises ou moins bien formulées.

AJAX (6 points)

Vous devrez créer une requête AJAX dans le fichier : ajax.js. (3 points)

Questions Javascript :

• Qu'est-ce que AJAX ? Quel est son intérêt ? (1 point)

Asynchronous JavaScript And XML. On peut utiliser AJAX pour faire l'interaction avec le serveur, possible mettre à jour une partie de la page sans refresher la page entirement.

• Donnez deux cas d'usage où AJAX est particulièrement utile. (2 points)

AJAX est pour envoyer des requêtes http asynchrones au serveur.

AJAX est aussi pour récupérer des données au format JSON, on peut ensuite afficher les informations dynamiquement.

HTML (8 points)

Vous devrez réaliser un formulaire de création de compte dans le fichier : index.html dans la section <section id="signup">. (3 points)

Questions HTML :

• Expliquez les points de vigilance quand on crée un formulaire en HTML par rapport à l'accessibilité ou aux bonnes pratiques par exemple. (2 points)

Les éléments de formulaires doivent toujours être liés à des labels ou des éléments de description via des aria. On peut aussi utiliser placeholder pour donner l'indication à l'utilisateur. Le mot-clé required permet de donner l'indication si l'utilisateur post la formulaire incomplete.

• Expliquez les deux attributs dans la balise <form> qui vous sont nécessaires ici pour créer votre formulaire. (1 point)

  method and action

• Expliquez la ou les différences entre les méthodes GET et POST. Quand utiliser l'une ou l'autre ? (2 points)

Get est utilisé pour demander des données à partir d'une ressource spécifique, donc les paramètres dans l'URL sont visibles dans la barre d'adresse du navigateur. On l'utilise souvent pour la recherche.

Post est utilisé envoyer des données au serveur dans le corps de la requête HTTP, donc elles ne sont pas visibles dans l'URL. On l'utilise souvent pour soumettre des formulaires.

PHP (8 points)

Vous devrez réaliser un script PHP qui permet d'insérer les données envoyées par le formulaire ci-dessus dans la base de données. (5 points)

Questions PHP :

• Expliquez les points d'attention à avoir quand on traite des données provenant d'un formulaire et qu'on insère celles-ci dans une base de données. (3 points)

Il faut que vérifier les données en PHP, tant en qualité qu'en quantité. On peut utiliser htmlspecialchars pour verifier les donnees post par l'utilisateur. On doit vérifier aussi la valeur est différente de NOT NULL et qu'elle ne fait pas plus de 255 caractères(quantité), et que ce que vous recevez est bien un string(qualité).

CSS (3 points)

Vous devrez réaliser un style CSS pour la liste des projets pour qu'elle ressemble à (3 points) :