Projet-1
- L'intitulé du projet
Vous travaillerez en groupe de 2, vous devez réaliser un site de type e-commerce qui propose au moins deux produits à acquérir.
- La page web présente les produits et un formulaire pour l'acquisition
- Le formulaire permet de sélectionner le nombre de produits désiré et de transmettre la demande d'acquisition au serveur web avec la méthode POST
- Un code Javascript devra vérifier que le formulaire est bien rempli avant transmission
- Un code PHP recevra les données et renverra une page web de confirmera la demande.
Exemple:
Si vous êtes rapide vous pourrez aborder l'enregistrement de la demande.
- Mise en place d'un projet web avec l'éditeur VS_codium ou Visual Studio Code:
- Créer un dossier appelé "projet_web" dans votre dossier U:documents\documents\devoir\nom_prof
- Ouvrir le dossier avec le logiciel VS_codium ou le logiciel Visual Studio Code ( dans les logiciels par discipline)
- Au premier lancement le logiciel pourra présenter une apparence légèrement différente de l'image ci-dessous,
sélectionner Fichier puis Ouvrir le dossier:
- Ouvrir le dossier crée plus tôt, répondre"oui je fais confiance aux auteurs" si la boite d'avertissement ci-dessous s'affiche"
Le résultat:
- Sélectionner ensuite "ajouter un fichier" avec l’icône entourée en rouge ci-dessous, nommez le fichier " index.html":
La zone de gauche s'est enrichie du nom du fichier et la zone à droite est prête à accueillir le code de ce fichier:
- Copier-coller, dans la zone de code, le squelette de page web ci-dessous :
<!DOCTYPE html>
<html>
<head>
<title> première page </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
Le squelette du site est fonctionnel
</body>
</html>
- Résultat:
- Enregistrer le code avec les touches "CTRL+S" ou avec le menu Fichier puis Enregistrer:
- Pour tester vous allez utiliser le navigateur Firefox, rendez-vous dans votre dossier "interaction web", Faire un clic droit sur le fichier index.html puis sélectionner Ouvrir avec Firefox:
Votre page web s'ouvre, vous devez avoir un rendu similaire à celui ci-dessous:
Pour tester vous pouvez aussi utiliser le navigateur Edge, en choisissant Run depuis Visual Studio code ( ou VSCodium)
Choisir ensuite Run Without Debugging puis Web App ( Edge)
Créé avec HelpNDoc Personal Edition: Éditeur de documentation CHM facile