Formulaire Next.js : Ajout de Tâches

L'Équipe Alphorm
L'Équipe Alphorm 14e lecture en min

Dans notre précédent article sur map next.js, nous avons exploré comment utiliser Next.js pour créer des cartes interactives. Aujourd’hui, nous allons continuer notre exploration de Next.js en créant un formulaire Next.js permettant d’ajouter et de gérer des tâches efficacement. Nous couvrirons chaque étape, de la mise en place du JSX à la stylisation avec CSS, et expliquerons comment ajouter des fonctionnalités de gestion des tâches, comme la création et la suppression. Suivez ce guide pour apprendre à intégrer facilement un formulaire fonctionnel et attrayant dans votre projet Next.js.

 

Découvrir l'exercice 1 avec un formulaire Next.js

Parfois, lors d’un projet, nous nous retrouvons souvent à concevoir un formulaire Next.js pour récupérer, envoyer ou ajouter des données à notre base de données, ou encore pour les afficher dans notre application. C’est une pratique courante, car vous avez peut-être déjà maîtrisé ce concept avec d’autres technologies. Maintenant, nous allons l’implémenter en utilisant Next.js. Notre objectif est de créer un formulaire qui nous permettra d’ajouter des tâches, lesquelles seront ensuite affichées juste en dessous du formulaire. Pour concrétiser cela, je vous présente ci-dessous un aperçu visuel du formulaire que nous allons essayer de réaliser :

Aperçu du formulaire à implémenter avec Next.js

Hâtez-vous de découvrir les nouvelles compétences, passons désormais à l’action.

Mettre en place le JSX pour un formulaire Next.js

Pour progresser efficacement vers notre objectif, nous allons maintenant établir les fondations de notre exercice en créant le formulaire  Next.js qui nous permettra d’ajouter des tâches. Comme nous allons aborder un exercice spécifique, j’ai créé un nouveau projet Next.js dédié à cet exercice en utilisant la commande bien connue : npx create-next-app exercice.

En lançant l’application avec la commande familière npm run dev, nous obtenons la structure par défaut de notre application, illustrée comme suit :

Structure par défaut d'un projet Next.js après exécution de la commande create-next-app

Ensuite, sans perdre de temps, nous allons immédiatement apporter les modifications nécessaires à notre formulaire Next.js pour qu’il réponde à nos besoins.

Pour faire un petit tour dans notre nouveau projet, on va essayer de changer le titre et description de notre application. Pour faire cela, comme vous le savez déjà, on doit se rendre dans le fichier app/layout.js

				
					import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Exercice",
description: "Exercice d'application  en nextJS ",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body data-rsssl=1 className={inter.className}>{children}<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>
);
}
				
			

Voilà, on a personnalisé juste le titre et la description :

Puis, nous allons mettre en place le formulaire Next.js qui doit être implémenté dans le fichier app/page.js

				
					export default function Home() {
return (
<div>
<h3><span className="material-symbols-outlined">add</span>
Tache</h3>
<input
type="text"
name="tache"
id="tache"
placeholder="Ajoutre tache"/>
<input
type = "submit"
value = "Valider"
/>
<h4><span className="material-symbols-outlined">task</span>
Liste des taches</h4>
</div>
);
}
				
			

Nous avons maintenant configuré notre formulaire de base et comme nous l’avons vu dans l’article précédent, nous avons également appris à afficher une icône. Cela nous amène à une question pratique : pourquoi ne pas mettre en pratique nos connaissances en essayant d’afficher une icône pour l’ajout de tâches et pour la liste de tâches ? Tout semble être en place maintenant, n’est-ce pas ?

Bien sûr, n’oublions pas d’apporter les modifications nécessaires au fichier layout.js en y ajoutant le code qui indique les liens pour les icônes. Vous pouvez examiner comment le faire avec le code ci-dessous :

				
					import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Exercice",
description: "Exercice d'application  en nextJS ",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>

<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-d10b75be-ff9b-494a-9a07-489325109350: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-133c8700-5775-4f46-8ff3-fdac052071fd: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-d10b75be-ff9b-494a-9a07-489325109350: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"d10b75be-ff9b-494a-9a07-489325109350","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-133c8700-5775-4f46-8ff3-fdac052071fd: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"133c8700-5775-4f46-8ff3-fdac052071fd","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body data-rsssl=1 className={inter.className}>{children}</body>
</html>
);
}
				
			

Voilà, on a ajouté le lien dans la balise <head> afin que les icones de notre choix soient affichables, et je suppose que vous savez déjà comment le faire.

Tout cela nous donne un visuel comme ceci :

Formulaire de tâche créé avec Next.js et JSX

Le formulaire et les icônes s’affichent correctement. La prochaine étape consistera à appliquer des styles CSS pour mettre en forme le formulaire. Nous aborderons cette partie dans la section suivante.

Plongez dans l’univers fascinant de Next.js et devenez un expert en 2024 grâce à notre formation vidéo exclusive sur Alphorm : Formation Next.js

Styliser le formulaire Next.js avec du CSS

Passons maintenant à la mise à page de notre formulaire. Pour le faire, on va se rendre dans le fichier page.module.css

				
					.div{
width: 75%;
margin: auto;
background-color:#ecf0f1;
padding: 20px;
margin-top: 15px;
display: flex;
flex-direction: column;
align-items:center;
}
.div h3,.div h4{
color:#ce392b;
margin-bottom: 10px;
display: flex;
align-items:center;
}
.div h3 span,.div h4 span{
color:#e74c3c;
margin-right:9px ;
}
.div h4{
margin-top: 15px;
border-top: 1px dashed #ccc;
padding-top: 4px;
}
.div input {
padding: 12px;
border: 1px solid #ccc;
outline: none;
border-radius:7px;
margin: 5px;
}
.div input::placeholder{
color:#aaa;
}
.div input[type="submit"]{
text-transform: capitalize;
letter-spacing: 1px;
font-size: 0.8rem;
font-weight: 700;
color:#777;
cursor: pointer;
}
.div input[type="submit"]:hover{
color:#000;
}
				
			

Voici les propriétés CSS que nous avons appliquées à notre formulaire Next.js pour le rendre attrayant, ce qui nous donne un visuel comme suit :

Formulaire de tâche Next.js après application de styles CSS

Maintenant que notre formulaire est bien établi, notre prochaine étape consiste à créer une nouvelle tâche elle-même. Voyons comment procéder dans la section suivante.

Créer et ajouter une nouvelle tâche avec Next.js

Il est temps de créer une nouvelle tâche maintenant. Vous vous demandez peut-être comment faire cela. Eh bien, pas de panique, nous sommes ici pour apprendre. Donc, commençons par déclarer un état pour la nouvelle tâche dans notre fichier app/page.js, puis ajoutons les attributs value et onChange dans notre input. Examinons-les maintenant dans le code ci-dessous :

				
					'use client'
import { useState } from "react";
import styles from "./page.module.css";
export default function Home() {
const [newTask,setNewTask] = useState('')
return (
<div className={styles.div}>
<h3><span className="material-symbols-outlined">add</span>
Tache</h3>
<div>
<input
type="text"
name="tache"
id="tache"
value={newTask}
onChange={(e)=>setNewTask(e.target.value)}
placeholder="Ajoutre tache"/>
<input
type = "submit"
value = "Valider"
/>
</div>
<h4><span className="material-symbols-outlined">task</span>
Liste des taches</h4>
</div>
);
}
				
			

Comme vous pouvez le constater, nous avons cette ligne de code que vous maîtrisez déjà :

				
					const [newTask,setNewTask] = useState('')
				
			

Cela consiste à déclarer un état (useState) pour la nouvelle tâche, ainsi que les deux attributs value et onChange qui nous permettront de récupérer la valeur de l’input et d’écrire dans le champ input.

Ainsi, nous pouvons désormais créer une nouvelle tâche. Vous pouvez vérifier le résultat visuel ci-dessous :

Processus de création de nouvelle tâche

Nous arrivons à créer une nouvelle tâche à travers notre formulaire Next.js. Maintenant, nous allons tenter d’afficher les tâches créées dans notre application quand l’utilisateur clique sur le boutton valider. Implémentons cela maintenant et vous pouvez voir le résultat ci-dessous.

Dans le fichier app/page.js

				
					'use client'
import { useState } from "react";
import styles from "./page.module.css";
export default function Home() {
const [newTask,setNewTask] = useState('')
//etat pour ajouter la liste des taches
const [tasks,setTasks]= useState([])
let addTask = ()=>{
if(newTask !== ''){
setTasks([...tasks,newTask]);
setNewTask('');
}
}
return (
<div className={styles.div}>
<h3><span className="material-symbols-outlined">add</span>
Tache</h3>
<div>
<input
type="text"
name="tache"
id="tache"
value={newTask}
onChange={(e)=>setNewTask(e.target.value)}
placeholder="Ajoutre tache"/>
<input
type = "submit"
value = "Valider"
onClick={addTask}
/>
</div>
<h4><span className="material-symbols-outlined">task</span>
Liste des taches</h4>
<ul>
{
tasks.map((tache,index)=>(
<li key={index}>{tache}</li>
))
}
</ul>
</div>
);
}
				
			

Premièrement , nous avons déclaré un état pour avoir une variable getter pour stocker les taches créées et validées à partir de cette ligne de code :

				
					const [tasks,setTasks]= useState([])
				
			

Ensuite, on a cette ligne de code aussi :

				
					let addTask = ()=>{
if(newTask !== ''){
setTasks([...tasks,newTask]);
setNewTask('');
}
}
				
			

Effectivement, cela implique de conditionner le champ d’entrée (input) en fonction de s’il est vide ou non. Donc, s’il contient une valeur, celle-ci doit être ajoutée à la liste des tâches, puis le champ doit être vidé après validation de la tâche. Ensuite, la fonction addTask est appelée lorsque l’utilisateur clique sur le bouton « Valider« , et enfin, nous allons mapper la liste de tâches pour les afficher dans notre application.

En laçant notre application, nous allons avoir un resultat comme ceci :

Formulaire de gestion de tâches en Next.js avec ajout et suppression de tâches

Bah oui, on a bien créé et afficher nos taches, parfait.

Pour aller plus loin et maîtriser pleinement les compétences abordées dans cet article, nous vous invitons à découvrir les formations d’Alphorm. Formations Alphorm.

Supprimer une tâche dans un formulaire Next.js

Pour notre dernière touche à cet exercice, nous avons réussi à afficher nos tâches précédentes. Cependant, envisageons le scénario où vous faites une faute en tapant une tâche que vous ne souhaitez pas afficher, ou vous avez fini la tâche et souhaitez la supprimer, mais actuellement nous n’avons pas cette fonctionnalité. C’est la raison de cette étape. Nous allons ajouter une icône à chaque tâche, et en cliquant dessus, la tâche sera supprimée.

Pour faire cela, nous allons ajouter l’icône et une fonction pour supprimer une tache. Implémentons la fonction dans le app/page.js maintenant :

 

				
					'use client'
import { useState } from "react";
import styles from "./page.module.css";
export default function Home() {
const [newTask,setNewTask] = useState('')
//etat pour ajouter la liste des taches
const [tasks,setTasks]= useState([])
let addTask = ()=>{
if(newTask !== ''){
setTasks([...tasks,newTask]);
setNewTask('');
}
}
let deleteTask = (index)=>{
let updateTask = [...tasks];
updateTask.splice(index,1);
setTasks(updateTask);
}
return (
<div className={styles.div}>
<h3><span className="material-symbols-outlined">add</span>
Tache</h3>
<div>
<input
type="text"
name="tache"
id="tache"
value={newTask}
onChange={(e)=>setNewTask(e.target.value)}
placeholder="Ajoutre tache"/>
<input
type = "submit"
value = "Valider"
onClick={addTask}
/>
</div>
<h4><span className="material-symbols-outlined">task</span>
Liste des taches</h4>
<ul>
{
tasks.map((tache,index)=>(
<li key={index}>{tache}
<button
className={styles.delete}
onClick={()=>{deleteTask(index)}}
>
<span className="material-symbols-outlined">delete
</span>
</button>
</li>
))
}
</ul>
</div>
);
}
				
			

On a cet extrait de code comme modification dans le fichier :

				
					let deleteTask = (index)=>{
let updateTask = [...tasks];
updateTask.splice(index,1);
setTasks(updateTask);
}
				
			

Cette fonction prend l’index de la tâche à supprimer en paramètre. Ensuite, elle crée une copie de la liste de tâches dans une variable nommée updateTask. L’opération splice() est alors appliquée à cette copie pour retirer l’élément à l’index spécifié. Enfin, la liste de tâches est mise à jour en utilisant le setter setTasks.

L’appel à cette fonction est également inclus dans l’extrait de code ci-dessous, en tant que modification que nous avons apportée.

				
					<ul>
{
tasks.map((tache,index)=>(
<li key={index}>{tache}
<button
className={styles.delete}
onClick={()=>{deleteTask(index)}}
>
<span className="material-symbols-outlined">delete
</span>
</button>
</li>
))
}
</ul>
				
			

Effectivement, comme vous pouvez le constater, une icône a été importée et la fonction deleteTask est appelée lorsque l’utilisateur clique sur cette icône.

Voilà la modification au niveau de notre composant mais pour mettre une mis en forme de notre icone, nous ajoutons aussi des propriétés css pour la classe delete de l’icône. Vous pouvez l’examiner comme ceci dans le fichier : app/page.module.css

				
					.delete{
background : none;
border:none;
color:#777;
cursor:pointer;
transition:0.6s;
}
.delete:hover{
color:#000;
}
.delete span{
font-size:1rem;
}
				
			

Ces propriétés sont simplement la base, mais étant donné que vous maîtrisez déjà CSS, vous pouvez choisir les propriétés que vous préférez. En lançant l’application, vous obtiendrez un résultat similaire à celui-ci, et en même temps, vous pourrez également supprimer des tâches.

Liste complète des tâches ajoutées et gérées

Voilà les tâches ajoutées, et puis si vous avez fini la lessive par exemple, vous pouvez la supprimer parmi la liste de tâche en cliquant juste sur l’icône.

Affichage de la tâche restante après la suppression des tâches terminées

Elle ne s’affiche plus .C’est génial non, on a terminé notre exercice avec succès.

Conclusion

En suivant ce guide, vous avez appris à créer un formulaire Next.js complet, de l’initialisation du projet à la gestion des tâches. Nous avons vu comment structurer le formulaire avec JSX, appliquer des styles CSS pour une meilleure présentation, et ajouter des fonctionnalités pour gérer les tâches. Ce formulaire Next.js vous permet non seulement d’améliorer l’interactivité de votre application, mais aussi de fournir une expérience utilisateur fluide et efficace. Continuez à explorer les capacités de Next.js pour développer des solutions encore plus robustes et innovantes . Et par la suite le volet suivant va traiter la maîtrise de UseEffect en Next.js

 

ÉTIQUETÉ : NextJS
Partager cet article
Par L'Équipe Alphorm Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.