Module de formation codé

<Formulaire d’inscription en ligne en PHP>

Présenter par: Zineb Ait Oumghar Khaoula Daoudi Sous la direction de: Prof: R.DAKIR

START >

>

>

<plan>

Introduction : définition du PHP .

Planification du formulaire .

Conception et création de la structure HTML et intégration de PHP dans le formulaire .

Conclusion .

>

>

Définition du PHP

Le PHP, acronyme de”Hypertext preprocessor”, est un langage de programmation principalement utilisé pour le développement web côté serveur.PHP est un langage de script interprété qui est souvent incorporé dans le code HTML pour générer du contenu dynamique sur les sites web. Il est extrêmement populaire et largement utilisé pour créer des applicalions web PHP est particulièrement apprécier pour sa faciliter d’utilisation et sa flexibilité. Il offre une large gamme de fonctionnaliter de plus,PHP est compatible avec la plupart des serveurs web et des systèmes d’exploitation,ce qui en fait un choix polyvalent pour le développement web .

Planification du formulaire

Analyse des besoins et des exigences :

• Identifier les besoins spécifiques de l'application ou du site web pour lesquels le formulaire est créé.
• Déterminer les informations nécessaires à collecter auprès des utilisateurs lors de leur inscription.
• Établir des objectifs clairs pour le formulaire, tels que la facilité d'utilisation, la sécurité des données, etc…

Définition du champs formulaire :

• Dresser une liste des champs d'inscription requis, tels que nom, prénom, adresse e-mail, mot de passe, etc.

>

>

Conception de l’interface :

• Esquisser l'interface utilisateur du formulaire pour visualiser sa disposition et son flux.
• Planifier la disposition des champs, des étiquettes et des boutons pour une expérience utilisateur optimale.

Planification del’integration avec PHP :

• Décider de la structure et de l'organisation du code PHP pour traiter les données soumises par le formulaire.
• Planifier la création de fonctions ou de classes réutilisables pour gérer les opérations courantes, telles que la validation des données, la manipulation de la base de données, etc.

Conception et création de la structure HTML

<div class="circle-text">: C'est une division avec une classe CSS qui semble être utilisée pour styliser le texte à l'intérieur comme un cercle. <h1><span class="inscription-text">inscri</span>ption</h1>: C'est un titre de niveau 1 (h1) qui contient le mot "inscription" avec une partie stylisée (inscri) à l'intérieur d'une balise <span>. <form action="traitement_inscription.php" method="post">: C'est le début d'un formulaire qui sera envoyé à "traitement_inscription.php" lorsque soumis via la méthode POST. <fieldset>: C'est un groupe de contrôles de formulaire logiquement liés, souvent utilisé pour entourer des éléments de formulaire et les rendre plus visuellement distincts. Les balises <label> sont des étiquettes pour les champs de formulaire.Les balises <input> sont utilisées pour créer des champs de formulaire. Les attributs type, id, name, et placeholder sont utilisés pour définir le type de champ, son identifiant, son nom et son texte de placeholder respectivement. Le <script> JavaScript semble être utilisé pour initialiser un sélecteur de date avec jQuery UI Datepicker. Cela permet aux utilisateurs de sélectionner une date à partir d'un calendrier.La syntaxe $(function() {...}); est utilisée pour exécuter le code JavaScript une fois que le DOM (Document Object Model) est prêt. $("#datepicker").datepicker({...}); initialise le sélecteur de date sur l'élément avec l'ID "datepicker".dateFormat: 'dd/mm/yy': Définit le format de la date comme "jj/mm/aaaa".changeMonth: true: Permet aux utilisateurs de changer le mois.changeYear: true: Permet aux utilisateurs de changer l'année.yearRange: '2000:2030': Définit la plage d'années disponibles de 2000 à 2030.

>

>

+info

Balises meta : <meta charset="UTF-8"> : Spécifie l'encodage des caractères pour la page Web comme UTF-8, qui prend en charge la plupart des caractères écrits dans différentes langues. <meta name="viewport" content="width=device-width, initial-scale=1.0"> : Définit la manière dont la page est affichée sur les appareils mobiles en définissant la largeur de l'écran sur la largeur de l'appareil (width=device-width) et en spécifiant le niveau d'échelle initial à 1.0. Balise <title> : <title>Champ de mot de passe avec cercles noirs</title> : Définit le titre de la page Web qui sera affiché dans l'onglet du navigateur. Liens vers jQuery et jQuery UI : <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> : Importe la feuille de style de jQuery UI, qui peut être utilisée pour styliser les éléments HTML. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> : Importe la bibliothèque jQuery, qui facilite la manipulation du DOM et l'interaction avec les éléments de la page. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> : Importe la bibliothèque jQuery UI, qui fournit des fonctionnalités supplémentaires telles que des widgets interactifs et des effets. La balise <input> avec l'attribut type="password" crée un champ de saisie de mot de passe où les caractères sont masqués par défaut. Un bouton de bascule avec le symbole d'un œil est ajouté à côté du champ de saisie. Cela permet à l'utilisateur de basculer entre l'affichage du mot de passe en texte clair et son masquage en cercles noirs.

Intégration de PHP dans le formulaire :

<form action="traitement_inscription.php" method="post">On ouvre un nouveau dossier pour qu’on sépare le code html par le code php et pour effectuer la partie de traitement du formulaire. Récupération des données du formulaire : $nom = $_POST['nom']; : Cette ligne récupère la valeur du champ "nom" du formulaire soumis et la stocke dans la variable $nom. $prenom = $_POST['prenom']; : Cette ligne récupère la valeur du champ "prenom" du formulaire soumis et la stocke dans la variable $prenom. $email = $_POST['email']; : Cette ligne récupère la valeur du champ "email" du formulaire soumis et la stocke dans la variable $email. $mot_de_passe = $_POST['mot_de_passe']; : Cette ligne récupère la valeur du champ "mot_de_passe" du formulaire soumis et la stocke dans la variable $mot_de_passe. Affichage des données de confirmation : echo "<h1>confirmation d'inscription</h1>"; : Cette ligne affiche un titre de niveau 1 (balise <h1>) indiquant "confirmation d'inscription". echo "nom :$nom<br>"; : Cette ligne affiche le nom récupéré suivi d'un saut de ligne HTML. echo "prenom :$prenom<br>"; : Cette ligne affiche le prénom récupéré suivi d'un saut de ligne HTML. echo "email : $email<br>"; : Cette ligne affiche l'email récupéré suivi d'un saut de ligne HTML.

>

>

Conclusion :

En résumé, la création d'un formulaire d'inscription en ligne en PHP est une étape cruciale pour toute application web nécessitant une interaction utilisateur. Cette présentation a souligné l'importance de la convivialité, de la sécurité et de la fonctionnalité tout au long du processus de conception.Enfin, nous avons souligné l'importance des tests, du débogage et de la maintenance continue pour garantir la fiabilité et la performance du formulaire au fil du temps toute en respectant le besoin de l’utilisateur .

>

>

Merci pour Votre attention🙂

Unit completed

// write anawesome title

Visual communication is a key tool. We find it easier to 'read' images than to read written text. That's why disciplines like Visual Thinking facilitate visually rich note-taking through the use of images, graphics, infographics, and simple drawings.