Les développeurs PHP peinent à gérer les saisies de formulaires dynamiques pour afficher des résultats précis, comme des capitales de pays, en temps réel.
Une mauvaise utilisation des fonctions PHP peut entraîner des erreurs fréquentes, des réponses incohérentes, et une expérience utilisateur dégradée.
Cet article présente une méthode pratique pour créer un formulaire PHP qui interagit avec une base de données, capturer les saisies utilisateur, et afficher dynamiquement les résultats souhaités, garantissant une interaction fluide et efficace pour l’utilisateur final.
Présentation du projet PHP 8 à réaliser
Le projet consiste à construire une page web contenant un formulaire dans lequel l’utilisateur devra saisir le nom d’un pays. En cliquant sur le bouton de validation du formulaire, l’utilisateur pourra obtenir la capitale de ce pays. Si le pays entré par l’utilisateur est présent dans la base de données, la capitale sera affichée. Si le pays n’est pas présent, un message indiquant que le pays est inconnu sera affiché.
Pour mettre en place ce projet, nous aurons besoin de trois fichiers :
- index.php : Ce fichier contiendra tout le code de la page web, y compris le formulaire et la logique PHP pour traiter la demande de l’utilisateur.
- style.css : Ce fichier contiendra les styles CSS pour la mise en forme de la page web.
- fonction_Capitale.php : Ce fichier contiendra la fonction PHP qui permet de déterminer la capitale du pays saisi par l’utilisateur.
Voilà le code html de fichier index.php
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Afficher la capitale </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-90fb3da7-70d0-4bed-ae84-4ab6f95bf0d4: 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-90fb3da7-70d0-4bed-ae84-4ab6f95bf0d4: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"90fb3da7-70d0-4bed-ae84-4ab6f95bf0d4","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body data-rsssl=1>
<section>
<form action="" method="post">
<h1>Entrer un pays </h1>
<input type="text" name="pays" placeholder="Entrer un pays">
<input type="submit" name="valider" value="Connaitre sa capitale">
</form>
</section>
<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>
Le résultat de l’affichage
Mise en place du CSS pour le projet PHP 8
Pour mettre en place le css de page en mettre dans le fichier style.css le code suivant
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
font-family: sans-serif;
margin: 0;
background-color: #2c3e50;
}
section{
background-color: #ecf0f1;
padding: 20px;
width: 60%;
border: 1px solid #000;
border-radius: 10px;
}
section h2 {
text-align: center;
font-size: 30px;
letter-spacing: 1px;
color: #2c3e50;
}
section input{
display: block;
width: 100%;
padding: 20px 50px;
margin: 20px auto;
border-radius: 5px;
outline: none;
box-sizing: border-box;
font-size: 20px;
}
section input[type="text"]{
border: none;
background: none;
border-bottom: 1px solid #333;
padding-bottom: 5px;
}
section input[type="submit"]{
border: none;
background-color: #e67e22;
color: #fff;
cursor: pointer;
border-radius: 50px;
}
section input[type="submit"]:hover{
background-color: #f1c40F;
}
Voilà le résultat d’affichage
Gestion des données du formulaire en PHP 8
Pour la suite de notre programme, nous allons gérer la validation du formulaire dans le cas où les champs sont vides en modifiant le fichier index.php en ajoutant le script suivant :
<?php
if(isset($_POST['valider'])){
if(empty($_POST['pays'])){
echo"<p>Meerci de rentrer un pays</p>";
}
else{
Capitale($_POST['pays']);
}
}
?>
Apres on va ajouter dans le fichier style.css
section p {
text-align: center;
font-size: 17px;
font-style: italic;
}
Voila le résultat
Création de la fonction capitale en PHP 8
Pour mettre en place la logique de la page, nous allons ajouter la fonction suivante dans le fichier fonction_Capitale.php :
<?php
function Capitale($pays){
switch($pays){
case "France":
$capitale = "Paris";
break;
case "Allemagne":
$capitale = "Berlin";
break;
case "Espagne":
$capitale = "Madrid";
break;
case "Italie":
$capitale = "Rome";
break;
case "Japon":
$capitale = "Tokyo";
break;
case "Chine":
$capitale = "Peking";
break;
case "Russie":
$capitale = "Moscou";
break;
}
return $capitale;
}
Puis en faire l’appel de cette fonction en ajoutant le code suivant dans inex.php
<?php
require('fonction_Capitale.php')
?>
Vérification du retour de la fonction Capitale
Pour gérer tous les cas où l’utilisateur entre un pays qui n’existe pas dans notre liste, nous allons modifier la fonction dans fonction_Capitale.php en ajoutant du code pour gérer cette situation.
Ajoutez le code suivant pour améliorer la gestion des pays non reconnus :
default:
$capitale = 0;
Cela permet de retourne 0 si le pays n’existe pas
Ensuite, nous allons mettre à jour le fichier principal en modifiant le script suivant :
<?php
if(isset($_POST['valider'])){
if(empty($_POST['pays'])){
echo"<p>Meerci de rentrer un pays</p>";
}
else{
$ville= Capitale($_POST['pays']);
if($ville==0){
echo"<p> Ce pays est inconnu de notre système</p>";
}
else{
echo'<p>La capitale de'.$_POST['pays'].' est la ville de '.$ville.' </p>';
}
}
}
?>
Voici le résultat affiché lorsque le pays n’existe pas dans notre système
Analyse du programme PHP 8 final
Après analyse du programme, nous avons constaté qu’il y a des cas spécifiques à traiter, notamment lorsque l’utilisateur saisit le nom du pays en majuscules ou mélange des majuscules et des minuscules. Pour cela, nous avons mis à jour le code principal comme vous pouvez le voir ci-dessous
<?php
require('fonction_Capitale.php');
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Afficher la capitale</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-90fb3da7-70d0-4bed-ae84-4ab6f95bf0d4: 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-90fb3da7-70d0-4bed-ae84-4ab6f95bf0d4: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"90fb3da7-70d0-4bed-ae84-4ab6f95bf0d4","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body data-rsssl=1>
<section>
<form action="" method="post">
< h2>Entrer un pays</ h2>
<input type="text" name="pays" placeholder="Entrer un pays"
<?php if (isset($_POST['pays'])) { ?>
value="<?= ucfirst(strtolower($_POST['pays'])) ?>"
<?php } ?>>
<input type="submit" name="valider" value="Connaitre sa capitale">
</form>
<?php
if (isset($_POST['valider'])) {
if (empty($_POST['pays'])) {
echo "<p>Merci de rentrer un pays</p>";
} else {
$pays = strtolower($_POST['pays']);
$ville = Capitale($pays);
if ($ville == 0) {
echo "<p>Ce pays est inconnu de notre système</p>";
} else {
echo '<p>La capitale de <strong>' . ucfirst($pays) . '</strong> est la ville de <strong>' . $ville . '</strong></p>';
}
}
}
?>
</section>
</body>
</html>
Explication de code
Strtolower :La fonction strtolower en PHP convertit tous les caractères alphabétiques d’une chaîne de caractères en minuscules.
Ucfirst : La fonction ucfirst en PHP convertit le premier caractère d’une chaîne de caractères en majuscule.
input type="text" name="pays" placeholder="Entrer un pays"
<?php if (isset($_POST['pays'])) { ?>
value="<?= ucfirst(strtolower($_POST['pays'])) ?>"
<?php } ?>>
Si la condition php 8 précédente est vraie, cette ligne est exécutée. Elle définit l’attribut value de l’input avec la valeur du champ pays soumise par l’utilisateur. La valeur est transformée en utilisant les fonctions strtolower et ucfirst pour assurer que le nom du pays commence par une majuscule suivie de minuscules.
Voici le résultat finale
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 PHP 8 vous a permis de mettre en pratique plusieurs concepts essentiels du développement web, notamment la gestion des formulaires, la manipulation des données utilisateurs, et l’intégration de CSS pour améliorer l’interface utilisateur. En suivant ce guide, vous avez pu créer une application fonctionnelle qui affiche la capitale d’un pays saisi par l’utilisateur. Continuez à explorer les possibilités offertes par PHP 8 pour développer des projets encore plus complexes et performants. Et par la suite nous allons traiter les formulaires avec PHP 8
