Nous allons réaliser un site permettant d'afficher des numérotation à base de chiffres originaux. En fonction des numéros à afficher, le client pourra se procurer les chiffres dont il a besoin sur notre site.
La page d'accueil du site va montrer chaque chiffre disponible, son prix et son poids. Pour chaque chiffre, un champ "Commande" permettra au client d'insrire la quantité de ce chiffre qu'il veut commander.
La commande étant terminée, le site affichera un récapitulatif de la commande, son poids, les frais d'expédition et le montant total à payer. Pour les besoins de la cause (vous êtes nombreuses et nombreux de par le monde à utiliser notre site et nous vous en remercions) nous avons inventé une nouvelle monnaie internationale : la Couque dont le sigle est "COU".
Le client doit avoir la possibilité de modifier sa commande avant la confirmation finale.
Les pages de cet exercice vont systématiquement se diviser en deux :
- La partie supérieure va montrer la page telle qu'elle se présente en ligne;
- La partie inférieure va montrer le code correspondant à la page affichée. Vous pourrez donc copier ce code si vous voulez gagner du temps et le modifier ensuite pour l'adapter à votre projet propre. Remarque : La mise en page de votre site diffèrera de la nôtre du fait des feuilles de style CSS.
Composez vos numéros de façon originale
Achetez vos chiffres exclusifs sur notre site SpaceNum
Détail du code de cette page.
<h1 align="center">Composez vos numéros de façon originale</h1><p align="center"><img src="image/4.png" alt="Chiffre 4" width="25" height="25" /> <img src="image/8.png" alt="Chiffre 8" width="25" height="25" /> <img src="image/3.png" alt="Chiffre 3" width="25" height="25" /> <img src="image/7.png" alt="Chiffre 7" width="25" height="25" /> <img src="image/0.png" alt="Chiffre 0" width="25" height="25" /> <img src="image/2.png" alt="Chiffre 2" width="25" height="25" /> <img src="image/1.png" alt="Chiffre 1" width="25" height="25" /> <img src="image/5.png" alt="Chiffre 5" width="25" height="25" /> <img src="image/9.png" alt="Chiffre 9" width="25" height="25" /> <img src="image/6.png" alt="Chiffre 6" width="25" height="25" /></p>
<h2 align="center">Achetez vos chiffres exclusifs sur notre site</h2>
<br />
<form method="post" action="verification_chiffres.php">
<table align="center">
<tr>
<th>Chiffre 0</th><td>18 COU<br />15 g.</td><td>Commande<br /><input type="text" name="C0" size="2" maxlength="2"></td><td><img src="image/0.png" alt="Chiffre 0" width="75" height="75" /></td><td> </td>
<th>Chiffre 1</th><td>18 COU<br />15 g.</td><td>Commande<br /><input type="text" name="C1" size="2" maxlength="2"></td><td><img src="image/1.png" alt="Chiffre 1" width="75" height="75" /></td>
</tr><tr>
<th>Chiffre 2</th><td>12 COU<br />9 g.</td><td>Commande<br /><input type="text" name="C2" size="2" maxlength="2"></td><td><img src="image/2.png" alt="Chiffre 2" width="75" height="75" /></td><td> </td>
<th>Chiffre 3</th><td>16 COU<br />13 g.</td><td>Commande<br /><input type="text" name="C3" size="2" maxlength="2"></td><td><img src="image/3.png" alt="Chiffre 3" width="75" height="75" /></td>
</tr><tr>
<th>Chiffre 4</th><td>15 COU<br />12 g.</td><td>Commande<br /><input type="text" name="C4" size="2" maxlength="2"></td><td><img src="image/4.png" alt="Chiffre 4" width="75" height="75" /></td><td> </td>
<th>Chiffre 5</th><td>13 COU<br />10 g.</td><td>Commande<br /><input type="text" name="C5" size="2" maxlength="2"></td><td><img src="image/5.png" alt="Chiffre 5" width="75" height="75" /></td>
</tr><tr>
<th>Chiffre 6</th><td>15 COU<br />12 g.</td><td>Commande<br /><input type="text" name="C6" size="2" maxlength="2"></td><td><img src="image/6.png" alt="Chiffre 6" width="75" height="75" /></td><td> </td>
<th>Chiffre 7</th><td>14 COU<br />11 g.</td><td>Commande<br /><input type="text" name="C7" size="2" maxlength="2"></td><td><img src="image/7.png" alt="Chiffre 7" width="75" height="75" /></td>
</tr><tr>
<th>Chiffre 8</th><td>11 COU<br />8 g.</td><td>Commande<br /><input type="text" name="C8" size="2" maxlength="2"></td><td><img src="image/8.png" alt="Chiffre 8" width="75" height="75" /></td><td> </td>
<th>Chiffre 9</th><td>18 COU<br />15 g.</td><td>Commande<br /><input type="text" name="C9" size="2" maxlength="2"></td><td><img src="image/9.png" alt="Chiffre 9" width="75" height="75" /></td>
</tr>
</table>
<p align="center">Pour l'ensemble de votre commande, des frais fixes de 20 COU sont applicables.</p>
<p align="center">Les frais d'envoi s'élèvent à 2 COU par tranches de 25 g. Toute tranche entamée est due.</p>
<input type="hidden" name="controle" value="mon_code_de_securite">
<p align="center"><input type="reset" value=" Réinitialiser ma commande "></p>
<p align="center"><input type="submit" value=" Je commande "></p>
</form>
NB : Les images nécessaires à la reconstruction de cette page peuvent être récupérées en faisant un clic droit sur les grandes images ci-dessus et en sélectionnant ensuite "Enregistrer l'image sous...". Les images sont à nommer de "0.png" à "9.png". Les images sont à stocker dans un répertoire nommé "image" qui doit être créé à l'endroit où se trouvera le script de cette page sur votre ordinateur.
Voyez toutes les améliorations que vous pourriez apporter à votre site marchand au fur-et-à-mesure des connaissances que vous aurez accumulées dans les différents domaines de la programmation informatique.
Important : chaque entrée dans un programme est une fragilité. Une grande qualité de la programmeuse / du programmeur est de réaliser des programmes robustes, c'est-à-dire de prévoir toutes les possibilités d'entrées et de dresser des "barrières" au cas où ces entrées pourraient poser un problème par la suite dans le bon déroulement du programme. Anticipez, faites très attention à cela. Comme exercice, essayez d'entrer toutes sortes de valeurs dans les commandes et dans votre adresse électronique à la page suivante.
Cliquer sur le bouton "Je commande" ci-dessus pour voir la page suivante de l'exercice ou sur "Retour" ci-dessous pour quitter l'exercice.