Créer une interface de commande en ligne avec PHP peut être complexe, notamment pour gérer les choix de pizzas, la validation des données, et le calcul des totaux.
Des erreurs peuvent nuire à l’expérience utilisateur et à la satisfaction client, entraînant des commandes incorrectes et des calculs erronés.
Découvrez dans cet article comment construire une interface intuitive et robuste en PHP pour une commande de pizzas en ligne, avec gestion des formulaires, faire des filtres PHP , validation des choix, et calculs automatisés des totaux et frais de livraison.
Introduction
Le projet vise à créer une interface utilisateur simple et intuitive pour passer des commandes de pizzas en ligne. L’écran commence par un en-tête intitulé « Passage de votre commande », qui explique clairement l’objectif de l’application. Vous pouvez entrer votre nom dans un champ de texte, symbolisé par une icône de profil. Ensuite, vous choisissez vos pizzas préférées parmi les options disponibles : « Reine » (10€), « Royale » (11€), « Calzone » (12€) et « Orientale » (13€), chaque pizza étant accompagnée d’une case à cocher.
L’interface propose également un interrupteur pour indiquer si vous souhaitez une livraison. Une fois que vous avez fait vos sélections, vous pouvez soumettre votre commande en cliquant sur le bouton « Valider votre commande », qui est clairement visible avec une icône de flèche.
En arrière-plan, des boules de pâte à pizza et un rouleau à pâtisserie décorent l’interface, soulignant le thème de la pizza et de la cuisine.
Mettre en place les bases du projet PHP
Pour mettre en place ce projet, commencez par créer la structure de base. D’abord, créez un dossier nommé medias. À l’intérieur de ce dossier, créez deux sous-dossiers : css, où vous placerez le fichier style.css, et fontawesome, qui contiendra un sous-dossier css avec le fichier all.min.css. Ensuite, créez le fichier index.php à la racine du projet, qui sera utilisé pour le code principal de votre page.
Dans le fichier index.php en va mettre ce code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>passage de votre commande</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-04e0b692-c20f-42c6-bbed-ff57f8dcc769: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-04e0b692-c20f-42c6-bbed-ff57f8dcc769: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"04e0b692-c20f-42c6-bbed-ff57f8dcc769","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<section>
<form action="" method="post">
<h2 id="passage-de-votre-commande" class="rb-heading-index-2">passage de votre commande</h2>
<i class="fas fa-user"></i>
<input type="text" name="nom" placeholder="entrez votre nom">
</form>
</section>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"351d0afa50","url":"https:\/\/blog.alphorm.com\/realiser-un-exercice-pratique-en-php-8","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Et pour le fichier style.css, il contient le code suivant :
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
body{
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
margin: 0;
}
En utilisant ce code, nous obtiendrons le résultat illustré dans cette figure :
Mettre en forme le champ nom dans le formulaire
Continuons à structurer notre projet PHP 8 en mettant en forme le champ « nom« . Cette étape est essentielle pour garantir une expérience utilisateur fluide et agréable. Nous allons ajouter du style à ce champ pour qu’il soit visuellement attrayant et facilement identifiable pour l’utilisateur.
Voile le code modifier de fichier index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>passage de votre commande</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-04e0b692-c20f-42c6-bbed-ff57f8dcc769: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-04e0b692-c20f-42c6-bbed-ff57f8dcc769: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"04e0b692-c20f-42c6-bbed-ff57f8dcc769","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<section>
<form action="" method="post">
<h2 id="passage-de-votre-commande" class="rb-heading-index-2">passage de votre commande</h2>
<div class="champ">
<i class="fas fa-user"></i>
<input type="text" name="nom" placeholder="entrez votre nom">
</div>
</form>
</section>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"351d0afa50","url":"https:\/\/blog.alphorm.com\/realiser-un-exercice-pratique-en-php-8","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
Après cela, nous allons mettre à jour le fichier style.css en ajoutant le style pour le champ nom.
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
body{
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
margin: 0;
background-image: url('../images/fond.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
section{
width: 85%;
max-width: 450px;
background-color: rgba(255,255,255,0.4);
padding: 20px;
box-sizing: border-box;
border-radius: 20px;
box-shadow: 2px 2px 5px #333;
}
section h2{
font-size: 26px;
letter-spacing: 1px;
text-align: center;
color: #2C3E50;
margin-bottom: 40px;
}
section .champ{
display: flex;
padding: 12px 0;
border-bottom: 1px solid #2C3E50;
}
section .champ i{
font-size: 25PX;
color: #2C3E50;
margin-right: 15px;
}
section .champ input{
border: none;
background: none;
font-size: 19px;
outline: none;
color:#fff;
}
::placeholder{
color: #7b7C7e;
}
Bravo, vous avez réussi ! Voici le résultat :
Mettre en place le bouton de validation du formulaire PHP
Pour faire fonctionner votre formulaire de commande, vous allez maintenant mettre en place le bouton de validation. Ce bouton permettra aux utilisateurs de soumettre leur commande une fois qu’ils auront rempli toutes les informations requises. Assurez-vous qu’il soit clairement visible et parfaitement fonctionnel pour garantir une expérience utilisateur fluide et agréable.
Alors, pour cela, nous allons ajouter le code suivant dans le fichier index.php
<p class="pointille">Valider votre commande</p>
<button type="submit" name="valider">
<i class="fas fa-sign-out-alt"></i>
</button>
Par la suite, nous allons également ajouter du code pour le fichier style.css
section .pointille{
border-top: 2px dashed #2C3E5;
padding-top: 15px;
text-align: center;
font-size: 20px;
color: #d35400;
font-weight: 700;
}
section .bouton{
background: #d35400;
color: #fff;
padding: 10px 30px;
font-size: 35px;
outline: none;
cursor: pointer;
border: 1px solid #fff;
margin: auto;
display: block;
border-radius: 10px;
}
section .bouton:hover{
background: #f39C12;
}
Voilà résultat d’affichage de notre page
Contrôler la présence du nom dans le formulaire PHP
Il est maintenant temps de mettre en pratique tout ce que vous avez appris. Nous allons voir comment vérifier la présence du nom dans votre formulaire
Nous allons écrire le fichier traitement.php, qui permettra de gérer le traitement de notre formulaire.
Ce fichier contient le code ci-dessous
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Traitement de votre commande</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-04e0b692-c20f-42c6-bbed-ff57f8dcc769: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-04e0b692-c20f-42c6-bbed-ff57f8dcc769: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"04e0b692-c20f-42c6-bbed-ff57f8dcc769","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<section>
<form action="index.php" method="post">
<h2 id="traitement-de-votre-commande" class="rb-heading-index-8">Traitement de votre commande</h2>
<button type="submit" name="valider">
<i class="fas fa-backward">
</>
</button>
</form>
<?php
if(empty($_POST['nom'])){
echo "<p class='pointille red'>Merci de rentrer votre nom</p>";
}else{
?>
<div class="pizza">
Commande passée par <?php echo $_POST['nom']; ?>
</div>
<?php
}
?>
</section>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"351d0afa50","url":"https:\/\/blog.alphorm.com\/realiser-un-exercice-pratique-en-php-8","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
Explication du Code :
- Formulaire : Le formulaire envoie les données via POST à index.php lorsque le bouton est cliqué. Le bouton, qui affiche une icône de retour, soumet le formulaire.
- Vérification PHP : Le code PHP vérifie si le champ nom est vide en utilisant empty($_POST[‘nom’]). Si le champ est vide, il affiche un message d’erreur demandant à l’utilisateur de rentrer son nom.
- Affichage PHP : Si le champ nom n’est pas vide, le code PHP affiche le nom de l’utilisateur saisi.
Après cela, nous allons modifier le fichier index.php en ajoutant cette ligne pour envoyer les données vers le fichier traitement.php.
<form action="traitement.php" method="post">
Puis, en appliquant ce style :
.red{
color: #c0392B
}
.pizza{
margin-top: 15px;
padding: 10px;
border-bottom: 1px solid #2C3E50;
}
Après avoir mis en place ces codes, on obtient le résultat suivant :
- Le cas le nom est vide
- Le cas contraire
Contrôler l'accès sécurisé au fichier traitement
Dans cette section, nous allons examiner comment contrôler l’accès au fichier traitement.php. Il est crucial de s’assurer que ce fichier n’est accessible que dans le contexte approprié, c’est-à-dire après une soumission correcte du formulaire. Nous allons mettre en place des vérifications pour garantir que le formulaire a bien été soumis avant de traiter les données. Nous aborderons également la gestion des cas où des données requises sont manquantes et fournirons des messages d’erreur clairs à l’utilisateur. En résumé, cette section vise à renforcer la sécurité et la fiabilité du traitement des commandes en ligne en veillant à l’intégrité des données soumises et à une interaction utilisateur cohérente.
Alors dans le fichier traitement.php essayer de remplacer le code précédemment par ce code suivant
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Traitement de votre commande</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-04e0b692-c20f-42c6-bbed-ff57f8dcc769: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-04e0b692-c20f-42c6-bbed-ff57f8dcc769: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"04e0b692-c20f-42c6-bbed-ff57f8dcc769","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<section>
<?php
if(isset($_POST['valider'])){
?>
<form action="index.php" method="post">
<h2 id="traitement-de-votre-commande" class="rb-heading-index-8">Traitement de votre commande</h2>
<button type="submit" name="valider">
<i class="fas fa-backward"></i>
</button>
</form>
<?php // onverifie si le nom est vide // debut
if(empty($_POST['nom'])){
echo "<p class='pointille red'>Merci de rentrer votre nom</p>";
}else{
?>
<div class="pizza">
Commande passée par <?php echo $_POST['nom']; ?>
</div>
<?php
}// onverfier si le nom est vide // fin
?>
<?php // si le formulaire est envoyé //suite
}else{
?>
<form action="index.php" method="post"></form>
<h2 id="une-erreur-est-survenue" class="rb-heading-index-11">une erreur est survenue</h2>
<button type="submit" name="valider">
<i class="fas fa-backward"></i>
</button>
</form>
<?php
}
?>
</section>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"351d0afa50","url":"https:\/\/blog.alphorm.com\/realiser-un-exercice-pratique-en-php-8","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
Explication du Contrôle d’Accès
- Vérification de la Soumission du Formulaire :
Le code commence par vérifier si le formulaire a été soumis correctement. Cela permet de s’assurer que le fichier traitement.php ne sera exécuté que dans le contexte approprié où les données ont été envoyées via le formulaire.
- Traitement des Données Soumises :
Une fois que le formulaire est validé comme soumis, le code traite les données reçues. Il vérifie si le champ requis est rempli. En fonction de la présence ou de l’absence de données, il affiche des messages appropriés, soit une confirmation du traitement des données, soit une demande de correction.
- Gestion des Cas d’Erreur :
Si le formulaire n’a pas été soumis, le code affiche un message d’erreur. Cette partie assure que les utilisateurs qui accèdent directement au fichier traitement.php sans passer par le formulaire reçoivent une notification adéquate et peuvent retourner à la page d’accueil pour réessayer.
Maîtrise Complète de PHP 8 : De l'Initiation à l'Expertise en Architecture MVC
Mettre en place les options de pizzas dans le formulaire
Maintenant, concentrons-nous sur l’essentiel : mettons en place les pizzas. C’est parti !
Dans le fichier index.php. Essayer d’aouter ce code
<p> Nos pizzas</p>
<div class="pizza">
<div class="">
<input type="checkbox" name="pizzas[]" value="riene" id="pizza1">
<label for="pizza1">Riene</label>
</div>
<div class="">
<label for="pizza2">Calzonne</label>
<input type="checkbox" name="pizzas[]" value="alzonne" id="pizza2">
</div>
</div>
<div class="pizza">
<div class="">
<input type="checkbox" name="pizzas[]" value="royale" id="pizza3">
<label for="pizza3">Royale</label>
</div>
<div class="">
<label for="pizza4">Orientale</label>
<input type="checkbox" name="pizzas[]" value="orientale" id="pizza4">
</div>
</div>
Apres appliquer ce style en ajoutant ce code au fichier css
display: flex;
justify-content: space-between;
Voilà résultat d’affichage
Maintenant, nous allons écrire le fichier _config.php.
<?php
define('PRIX_REINE', 10);
define('PRIX_ROYALE', 11);
define('PRIX_CALZONE', 12);
define('PRIX_ORIENTALE', 13);
Afficher le tarif des pizzas sélectionnées
Maintenant que les pizzas sont en place sur notre site web, il est important de passer à la gestion de leurs tarifs. C’est parti !
Dans le fichier index en ajoutant ce code suivant :
<p> Nos pizzas</p>
<div class="pizza">
<div class="">
<input type="checkbox" name="pizzas[]" value="riene" id="pizza1">
<label for="pizza1">Riene <span><?=PRIX_RIENE; ?>€</span></label>
</div>
<div class="">
<input type="checkbox" name="pizzas[]" value="alzonne" id="pizza2">
<label for="pizza2">Calzonne <span><?=PRIX_CALZONE; ?>€</span></label>
</div>
</div>
<div class="pizza">
<div class="">
<input type="checkbox" name="pizzas[]" value="royale" id="pizza3">
<label for="pizza3">Royale <span><?=PRIX_ROYALE; ?>€</span></label>
</div>
<div class="">
<input type="checkbox" name="pizzas[]" value="orientale" id="pizza4">
<label for="pizza4">Orientale <span><?=PRIX_ORIENTALE; ?>€</span></label>
</div>
</div>
Ce code HTML affiche une section intitulée « Nos pizzas » où les utilisateurs peuvent sélectionner leurs choix parmi plusieurs options de pizzas. Chaque pizza est présentée avec une case à cocher, permettant à l’utilisateur de sélectionner plusieurs pizzas si désirées. Les prix des pizzas sont affichés à côté de chaque nom, et ces prix sont insérés dynamiquement à partir de constantes PHP, offrant une flexibilité pour mettre à jour les tarifs directement dans le code backend. La structure est organisée en blocs pour chaque paire de pizzas, facilitant ainsi la présentation et la sélection.
Apres cela en ajouter ce style
.pizza span{
background-color: #fff;
padding: 2px 6px;
border-radius: 4px;
margin-left: 7px;
}
.pizza input[type="checkbox"]+label::before{
content: '';
width: 20px;
height: 20px;
background-color: #e1e1E1;
display: inline-block;
border-radius: 5px;
margin-right: 10px;
}
.pizza input[type="checkbox"]:checked+label::before{
content: '\2713';
background-color: #16a085;
color: #fff;
text-align: center;
}
Voici les options de pizzas disponibles avec leurs tarifs. Sélectionnez vos choix et passez à la validation de votre commande
Mettre en forme les options de pizzas dans le formulaire
Dans cette section, nous allons nous concentrer sur la mise en forme des options de pizzas sur notre interface utilisateur. L’objectif est de présenter les différentes pizzas de manière claire et attrayante, en veillant à ce que les informations telles que les noms et les prix soient bien visibles et facilement sélectionnables. Nous appliquerons des styles pour améliorer l’apparence visuelle et l’interaction avec l’utilisateur, garantissant ainsi une expérience utilisateur fluide et agréable lors de la sélection de pizzas.
Dans le fichier index . php ajouter ce code
<label for="pizza1"><strong>Riene</strong> <span><?=PRIX_RIENE; ?>€</span></label>
Puis appliquer ce style
.pizza div{
width: 150px;
}
section p{
font-size: 18px;
font-weight: 700;
color: #2C3E50;
margin-top: 25px;
letter-spacing: 1px;
}
Voici résultat d’affichage
Contrôler la sélection d'au moins une pizza
Dans cette section, nous allons mettre en place un mécanisme pour vérifier qu’au moins une pizza a été sélectionnée avant la soumission du formulaire. L’objectif est de s’assurer que les utilisateurs ne peuvent pas soumettre le formulaire sans avoir choisi au moins une option de pizza, ce qui est crucial pour traiter correctement leur commande. Nous ajouterons une vérification pour garantir qu’au moins une case à cocher est sélectionnée et afficherons un message d’erreur approprié si aucune pizza n’est choisie. Cette étape permettra de valider les données du formulaire et d’améliorer l’expérience utilisateur en évitant les erreurs de soumission.
Dans le fichier traitment.php en ajoute ce code
<?php
if(issset($_POST['pizzas'])){
echo"<p class='pointille red'>Merci de choisir only une pizza</p>";
}
?>
Si l’utilisateur n’a sélectionné aucune option, affichez un message d’information comme illustré dans la figure suivante.
Maintenant en va mettre a jour a le fichier index en ajoutant ce code
<input type="text" name="nom" placeholder="entrez votre nom" value="<?php if(!empty($_POST['nom'])){ echo $_POST['nom'];} ?>">
Et ensuite ce code dans fichier traitement.php
<input type="hidden" name="nom" value="<?php echo $_POST['nom']; ?>">
Afficher les pizzas choisies par l'utilisateur
Dans cette section, nous allons nous concentrer sur l’affichage des pizzas sélectionnées par l’utilisateur. Après la soumission et la validation du formulaire, nous récupérerons les options choisies et les présenterons clairement. L’objectif est de permettre à l’utilisateur de revoir sa sélection avant de finaliser la commande, en affichant les noms et les prix des pizzas choisies. Nous veillerons également à ce que la présentation soit claire et lisible, offrant ainsi une confirmation visuelle des choix effectués.
Dans le fichier traitement.php en ajoutant ce code suivant
<?php
foreach($_POST['pizzas'] as $pizza){
?>
<div class="pizza">
<div>
<?php echo $pizza; ?><?=PRIX_RIENE; ?>€</span>
</div>
</div>
<?php
}
?>
- Boucle de Parcours : Le code parcourt chaque pizza sélectionnée par l’utilisateur, en utilisant une boucle PHP 8 pour traiter les éléments du tableau $_POST[‘pizzas’].
- Affichage des Détails : Pour chaque pizza, un bloc HTML est généré. Ce bloc contient le nom de la pizza sélectionnée.
- Prix Fixe : Le code affiche un prix fixe associé à chaque pizza, ce qui est actuellement le même pour toutes les options. Il est nécessaire de modifier le code pour afficher les prix corrects correspondant à chaque type de pizza.
Afficher le tarif exact de chaque pizza choisie
Dans cette section, nous allons nous concentrer sur l’affichage du tarif exact pour chaque pizza que vous avez choisie. Actuellement, le code affiche un prix fixe pour toutes les pizzas, mais il est important de montrer le tarif spécifique de chaque pizza en fonction de votre sélection. Voici comment vous pouvez procéder :
Dans le fichier _config.php en définir la fonction suivante
function Tarif($pizza){
switch($pizza){
case 'riene':
$tarif=PRIX_REINE;
break;
case 'royale':
$tarif=PRIX_ROYALE;
break;
case 'calzone':
$tarif=PRIX_CALZONE;
break;
case 'oriental':
$tarif=PRIX_ORIENTAL;
break;
}
return $tarif;
La fonction Tarif est conçue pour déterminer le tarif d’une pizza en fonction de son nom. Elle prend en entrée le nom de la pizza (représenté par la variable $pizza) et utilise une structure switch pour associer chaque nom de pizza à son tarif spécifique.
- Fonctionnement : La fonction vérifie la valeur de la variable $pizza et, selon la valeur correspondante, elle assigne le tarif approprié à la variable $tarif. Par exemple, si le nom de la pizza est ‘riene’, le tarif est défini en utilisant la constante PRIX_REINE. Le switch couvre plusieurs cas, chacun correspondant à un type de pizza différent (‘riene’, ‘royale’, ‘calzone’, ‘oriental’), et affecte la valeur du tarif en conséquence.
- Retour du Tarif : Une fois que le tarif approprié est assigné, la fonction retourne cette valeur à l’endroit où elle a été appelée. Cela permet à d’autres parties du code d’utiliser cette valeur pour afficher ou traiter le tarif de la pizza choisie.
Dans le fichier traitement.php en ajoute ce code
<?php echo $pizza; ?><?=Tarif($pizza) ;?>€</span>
Le teste de code
Permettre d'entrer une quantité par pizza commandée
Dans cette section, nous allons ajouter la fonctionnalité permettant aux utilisateurs de spécifier une quantité pour chaque pizza qu’ils commandent. Cela implique de modifier le formulaire de commande pour inclure un champ de quantité pour chaque pizza, et de mettre à jour le traitement des données pour gérer ces quantités. Voici les étapes à suivre :
Dans le fichier traitement.php en ajoutant ce code
<input type="number" name="quantite<?= $pizza; ?>" value="1">
Puis en appliquer ce style
section input[type="number"]{
width: 30px;
padding: 2px;
border: none;
outline: none;
border-radius: 50px;
}
Voila résultat d’affichage
Créer le fichier de finalisation de la commande en PHP 8
Pour compléter le processus de commande, vous allez créer un fichier dédié à la finalisation de la commande. Ce fichier sera chargé de récapituler les détails de votre commande, y compris les pizzas choisies, les quantités, les prix et le total. Il pourra également fournir une confirmation à l’utilisateur et préparer les données pour le traitement ou l’envoi par e-mail, si nécessaire. Voici comment procéder :
Le Fichier de Finalisation
Créez un fichier PHP, par exemple finalise.php, qui affichera les détails de la commande. Ce fichier récupérera les données soumises via le formulaire, calculera les totaux, et affichera un récapitulatif complet de la commande.
Récupérer et Afficher les Détails de la Commande
Dans le fichier finalise.php, vous devrez :
- Récupérer les pizzas choisies, les quantités et les prix.
- Calculer le total de la commande.
- Afficher un récapitulatif des pizzas commandées avec les quantités et les prix.
Premièrement en vas mettre a jour a le fichier traitement.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Traitement de votre commande</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-04e0b692-c20f-42c6-bbed-ff57f8dcc769: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-04e0b692-c20f-42c6-bbed-ff57f8dcc769: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"04e0b692-c20f-42c6-bbed-ff57f8dcc769","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<section>
<?php
if(isset($_POST['valider'])){
?>
<form action="index.php" method="post">
<h2 id="traitement-de-votre-commande" class="rb-heading-index-8">Traitement de votre commande</h2>
<button type="submit" name="valider">
<i class="fas fa-backward"></i>
</button>
<input type="hidden" name="nom" value="<?php echo $_POST['nom']; ?>">
</form>
<?php // onverifie si le nom est vide // debut
if(empty($_POST['nom'])){
echo "<p class='pointille red'>Merci de rentrer votre nom</p>";
}else{
?>
<?php //on verifie si l'utilisateur a choisi une pizza // debut
if(issset($_POST['pizzas'])){
echo"<p class='pointille red'>Merci de choisir only une pizza</p>";
}else{ //on verifie si l'utilisateur a choisi une pizza // suite
?>
<form action="finalise.php" method="post">
<?php
foreach($_POST['pizzas'] as $pizza){
?>
<div class="pizza">
<div>
<input type="number" name="quantite<?= $pizza ?>" value="1">
<?php echo $pizza; ?><?= Tarif($pizza) ?>€</span>
</div>
</div>
<?php
}
?>
<div class="pizza">
Commande passée par <?php echo $_POST['nom']; ?>
</div>
<p class="pointille">finaliser votre commande</p>
<button type="submit" name="valider">
<i class="fas fa-sign-out-alt"></i>
</button>
</form>
<?php
}// onverfier si le nom est vide // fin
?>
<?php
}//on verifie si l'utilisateur a choisi une pizza // fin
?>
<?php // si le formulaire est envoyé //suite
}else{
?>
<form action="index.php" method="post"></form>
<h2 id="une-erreur-est-survenue" class="rb-heading-index-11">une erreur est survenue</h2>
<button type="submit" name="valider">
<i class="fas fa-backward"></i>
</button>
</form>
<?php
}
?>
</section>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"351d0afa50","url":"https:\/\/blog.alphorm.com\/realiser-un-exercice-pratique-en-php-8","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
Puis dans finalise.php en mettre ce code
<?php
require_once('_config.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Finaliser de votre commande</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-04e0b692-c20f-42c6-bbed-ff57f8dcc769: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-04e0b692-c20f-42c6-bbed-ff57f8dcc769: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"04e0b692-c20f-42c6-bbed-ff57f8dcc769","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<section>
<h2 id="finaliser-de-votre-commande" class="rb-heading-index-23">Finaliser de votre commande</h2>
</section>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"351d0afa50","url":"https:\/\/blog.alphorm.com\/realiser-un-exercice-pratique-en-php-8","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
Afficher les pizzas commandées dans le fichier de finalisation en PHP 8
Pour afficher les détails de la commande dans le fichier finalise.php, vous devez montrer les pizzas sélectionnées, leurs quantités et le coût total de la commande. Voici comment procéder pour intégrer ces informations :
- Récupérer les Données de la Commande
Assurez-vous que le fichier de finalisation (finalise.php) récupère correctement les données envoyées depuis le formulaire de commande, incluant les pizzas sélectionnées et leurs quantités.
- Calculer et Afficher les Détails de la Commande
Modifiez le fichier pour afficher les informations pertinentes telles que les noms des pizzas, les quantités, les prix unitaires et le total général de la commande le code détaillé de comment afficher ces informations :
<?php
require_once('_config.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Finaliser de votre commande</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-04e0b692-c20f-42c6-bbed-ff57f8dcc769: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-04e0b692-c20f-42c6-bbed-ff57f8dcc769: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"04e0b692-c20f-42c6-bbed-ff57f8dcc769","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<section>
<?php
if(isset($_POST['valider'])){
?>
<h2 id="finaliser-de-votre-commande" class="rb-heading-index-23">Finaliser de votre commande</h2>
<?php
foreach($_POST['pizzas'] as $pizza){
?>
<div class="pizza">
<div>
<?php echo $pizza; ?><?= Tarif($pizza) ?>€</span>
</div>
</div>
<?php
}
?>
<?php // si le formulaire est envoyé //suite
}else{
?>
<form action="index.php" method="post"></form>
<h2 id="une-erreur-est-survenue" class="rb-heading-index-11">une erreur est survenue</h2>
<button type="submit" name="valider">
<i class="fas fa-backward"></i>
</button>
</form>
<?php
}?>
</section>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"351d0afa50","url":"https:\/\/blog.alphorm.com\/realiser-un-exercice-pratique-en-php-8","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
Dans le fichier traitement.php
<input type="hidden" name="pizza[]"value="<?php echo $pizza; ?>">
Afficher la quantité de pizzas dans le fichier de finalisation en PHP 8
Pour afficher la quantité de chaque pizza commandée dans le fichier de finalisation, vous devez intégrer les quantités spécifiées dans le récapitulatif. Voici les étapes pour le faire :
- Modifier le Fichier de Finalisation
Assurez-vous que le fichier finalise.php récupère et affiche les quantités pour chaque pizza commandée. Le but est de montrer non seulement le nom des pizzas et leur coût, mais aussi la quantité commandée pour chacune.
Dans le finalise.php en ajoute ce code
<?php
if($_POST['quantite'.$pizza.'']>0){
?>
<?=$_POST['quantite'.$pizza.''];?>
<?php echo $pizza; ?><?= Tarif($pizza) ?>€</span>
<?php
}else{
?>
<div class="red">
Anullation de la commande lié a pizza
</div>
<?php
}
?>
Maintenant en va mettre ajours a le fichier en modifiant ce script
<div class="pizza">
<div>
<?php
if($_POST['quantite'.$pizza.'']>0){
?>
<?php
if($_POST['quantite'.$pizza.'']>1){
$pz=$pizza.'s';
}else{
$pz=$pizza;
}
?>
<?=$_POST['quantite'.$pizza.''];?>
<?php echo $pz; ?><?= Tarif($pizza) ?>€</span>
<?php
}else{
?>
<div class="red">
Anullation de la commande lié a pizza
</div>
<?php
}
?>
</div>
</div>
Calculer et afficher le total à payer pour la commande en PHP 8
Pour afficher le total à payer dans le fichier de finalisation, vous devez calculer le montant total de la commande en fonction des pizzas commandées et de leurs quantités. Voici comment procéder :
- Calculer le Total
Le total à payer est la somme des prix de toutes les pizzas commandées, multipliés par leurs quantités respectives. Ce calcul est effectué en parcourant les données des pizzas et leurs quantités, puis en additionnant les résultats.
- Afficher le Total
Affichez le montant total à la fin du récapitulatif de la commande pour que l’utilisateur puisse voir combien il doit payer.
Dans le fichier traitement.php en ajoute cette ligne
<input type="hidden" name="nom" value="<?=$_POST['nom'];?>">
Puis ajoute ce code pour fichier de finalisation
<div class="pizza">
Commande passée par <?php echo $_POST['nom']; ?>
</div>
La sortir de programme
En va modifier le script de fichier finalise
<?php
$Total=0;
foreach($_POST['pizzas'] as $pizza){
?>
<div class="pizza">
<div>
<?php
if($_POST['quantite'.$pizza.'']>0){
?>
<?php
if($_POST['quantite'.$pizza.'']>1){
$pz=$pizza.'s';
}else{
$pz=$pizza;
}
?>
<?=$_POST['quantite'.$pizza.''];?>
<?php echo $pz; ?><?= Tarif($pizza) ?>€</span>
<?php
$Total+=Tarif($pizza)*$_POST['quantite'.$pizza.''];
?>
<?php
}else{
?>
<div class="red">
Anullation de la commande lié a pizza
</div>
<?php
}
?>
</div>
</div>
<?php
}
?>
<div class="pizza">
Commande passée par <?php echo $_POST['nom']; ?>
</div>
<div class="pizza">
<strong>Tolal à payer :<?=$Total?> € </strong>
</div>
Mettre en place une option de livraison possible en PHP 8
Pour offrir une option de livraison dans votre application de commande de pizzas, suivez ces étapes :
Étape | Description |
|---|---|
Ajouter une Option de Livraison au Formulaire | Incluez une case à cocher ou un bouton radio dans le formulaire de commande pour permettre à l’utilisateur de choisir s’il souhaite une livraison. |
Mettre à Jour le Code pour Traiter la Livraison | Modifiez le code de traitement pour gérer l’option de livraison et afficher les informations appropriées dans la page de finalisation.
|
Afficher l’Option de Livraison dans la Finalisation | Affichez l’option de livraison dans la page de récapitulatif pour que l’utilisateur puisse voir si la livraison a été sélectionnée. |
Exemple de Code
Dans le fichier index en ajoute ce code
<div class="livrer">
<p>Livraison </p>
<div class="switch">
<input type="checkbox" name="livraison" id="livraison">
<label for="livraison "></label>
</div>
</div>
Puis en appliquer ce style
.livrer{
display: flex;
justify-content: center;
align-items: center;
}
.livrer p{
margin-right: 20px;
}
Voici la sortis de code
Mettre en place un switch pour la livraison en PHP 8
Dans cette section en va mettre en place le style en ajoutant ce code
.switch label{
width: 100px;
height: 20px;
background-color:#2C3E50;
display: block;
border-radius: 15px;
position: relative;
}
.switch label::after{
content: "";
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #95a5a6;
position: absolute;
left: 0;
top: 50%;
transform: translate(-50%);
border: 1px solid #2C3E50;
}
.switch input[type="checkbox"]{
display: none;
}
.switch input[type="checkbox"]:checked label::after{
left: 50px;
background-color: #d35400;
transition: 0.5s;
}
Voici le résultat d’affichage
Définir le tarif de livraison pour la commande en PHP 8
Pour mettre en place la fonctionnalité de livraison et définir son tarif dans votre application de commande de pizzas, vous devez suivre les étapes suivantes :
- Définir le Tarif de Livraison
Avant de pouvoir appliquer un tarif pour la livraison, vous devez le définir clairement dans votre code. Ce tarif peut être fixe ou variable en fonction de divers critères comme la distance ou la taille de la commande.
Dans le fichier _config.php en définir ceci
define(‘LIVRAISON’, 5);
- Ajouter la Gestion du Tarif de Livraison dans le Code
Modifiez le code de votre application pour inclure ce tarif de livraison lorsque l’option de livraison est sélectionnée.
<?php
if(isset($_POST['livraison'])){
echo '<div><strong>Livraison</strong> <span>'.LIVRISON.'€ </span></div>';
}else{
echo'A retirer sur palce ';
}
?>
- Affiche de résultat
Calculer et afficher le tarif final de la commande en PHP 8
Pour calculer le tarif final à payer dans votre application de commande de pizzas, vous devez prendre en compte plusieurs éléments : le prix des pizzas, les quantités commandées, et les frais de livraison (si applicable). Voici les étapes détaillées pour réaliser ce calcul :
Dans le fichier traitement en ajoute ce code
<input type="hidden" name="livraision" value="<?php if(isset($_POST['livraison'])){echo$_POST['livraison'];}?>">
Puis en ajouter ceci pour le fichier finalisation
<div class="pizza">
<?php
if($_POST['livraison']=="on"){
echo '<div><strong>Livraison</strong> <span>'.LIVRISON.'€ </span></div>';
$livre=LIVRAISON;
}else{
echo'A retirer sur palce ';
$livre=0;
}
?>
</div>
<div class="pizza">
Commande passée par <?php echo $_POST['nom']; ?>
</div>
<div class="pizza">
<strong>Tolal à payer :<?=$Total+ $livre;?> € </strong>
</div>
Voila résultat d’affichage
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
Conclusion
Ce projet vise à créer une interface utilisateur intuitive pour passer des commandes de pizzas en ligne. L’application permet aux utilisateurs de saisir leur nom, de choisir parmi une sélection de pizzas, d’indiquer s’ils souhaitent une livraison et de soumettre leur commande de manière simple et efficace. Voici un récapitulatif des principales sections et fonctionnalités de l’interface
Section | Description |
|---|---|
Champ de texte | Passage de votre commande » indique clairement l’objectif de l’application. |
Champ de texte | Vous pouvez entrer votre nom, représenté par une icône de profil. |
Sélection de pizzas | Vous pouvez choisir parmi « Reine » (10€), « Royale » (11€), « Calzone » (12€) et « Orientale » (13€), chaque option ayant une case à cocher. |
Option de livraison | Un interrupteur bascule permet d’indiquer si vous souhaitez une livraison. |
Soumission de la commande | Vous pouvez soumettre votre commande en cliquant sur le bouton « Valider votre commande » avec une icône de flèche. |
Arrière-plan | L’arrière-plan montre des boules de pâte à pizza et un rouleau à pâtisserie, renforçant le thème de la pizza et de la cuisine. |
Pour approfondir vos connaissances et prolonger plus dans les volets PHP 8 nous allons traiter la gestion de base de données en utilisant MySQL et PHPMyAdmin.
