Réact-Native : CRUD 2/2
Ce billet analyse le code de l'onglet ci-dessous : UpdateCrud.js. C'est un exemple de code que l'on utilise pour gérer l' opération Update sur une table d'une base de données stockée sur un serveur distant. Les opérations Create, Read et Delete sont présentée ICI.
La fonction UpdateRecord de ce code utilise l'api fetch pour mettre à jour un enregistrement de la table. L'URL, argument obligatoire de fetch est un script php détaillé ICI.
Il peut être utile de (re) lire le résumé sur l'utilisation de "useState" et celui sur la navigation pour l'appel de la fonction "UpdateCrud".
Le coeur
La fonction UpdateCrud() affiche l' écran de navigation illustré ci-contre. Elle dispose donc des paramètres "navigation" et "route".
Ce dernier, route, permet de récupérer les paramètres transmis par l'écran appelant ( l'écran d'accueil dans sa fonction updateCrud()) par sa méthode "params". Ceux-ci sont enregistrés dans les variables respectives num, name et course lors de l'exécution de la ligne de code : "const { num, name, course } = route.params;"
Elle dispose également des variables (internes) et de leur "setter":
- upName pour mémoriser le nom d'étudiant lors de sa saisie par l'utilisateur ;
- upCourse pour mémoriser le cours suivi lors de sa saisie par l'utilisateur ;
La fonction UpdateCrud() rends une vue composée de 2 zones de saisie de texte : "TextInput" et d'un bouton "Mettre à jour" pour le traitement des saisies.
La propriété "onChangeText" de chaque "TextInput" fait appel au setter correspondant pour mémoriser la donnée saisie par l'utilisateur :
- le setter "setUpName" mémorise le nom saisi dans la variable "upName" ;
- le setter "setUpCourse" mémorise le nom du cours saisi dans la variable "upCourse" ;
La propriété "placeholder" de chaque "TextInput" utilise les valeurs mémorisées "name" et "course" pour afficher l'état initial de la donnée à mettre à jour par l'utilisateur
Le bouton "Mettre à jour" exécute une fonction anonyme qui :
- appelle la fonction "UpdateRecord() en transmettant les 3 paramètres upName, upCourse, num" ;
- affiche l'écran d'accueil par navigation.navigate("Crud").
La fonction UpdateRecord()
Cette fonction utilise l'API fetch avec pour arguments :
- l'URL du script de gestion de la BdD distante (voir ici sa description) dans la variable CrudAPIURL qui vaut "https://code.dhumbert.info/mycrud.php" ;
- les réglages de l'URL dans le tableau
{
method: 'POST',
headers: Headers,
body: JSON.stringify(Data),
}
Comme indiqué dans le script "mycrud.php", pour une mise à jour d'un enregistrement de la BdD, les paramètres à transmettre dans le corps (body) de la requête sont :
- "op" avec "update" pour valeur ;
- "num" avec le numéro num de l'enregistrement à modifier pour valeur ;
- studentName avec le nouveau nom upName pour valeur ;
- course avec le nouveau cours upCourse pour valeur.
Ces éléments constituant le corps de la requête sont dans la variable "Data".
L'entête (headers) spécifie que le corps doit être émis au format JSON d'où l'utilisation de la fonction JSON.stringify sur "Data"
La requête est transmise en mode POST (pour que les paramètres ne figurent pas dans l'URL).
Les méthodes then et catch sont appliquées sur la réponse reçue.
dans le presse papier
import React, { useState } from "react";
import { StyleSheet,
TextInput,
Button,
View } from "react-native";
const UpdateRecord =(num, upName, upCourse) => {
var CrudAPIURL="https://code.dhumbert.info/mycrud.php";
var Headers={
'Accept':'Application/JSON',
'Content-Type':'Application/JSON'
};
var Data={
"op":"update",
"studentName" : upName,
"course" : upCourse,
"num" : num,
};
fetch(
CrudAPIURL,
{ method: 'POST',
headers: Headers,
body: JSON.stringify(Data),
})
.then( (response) => response.json())
.then( (response) => {
/*alert(response.Message);*/
})
.catch( (error) => {
alert("error"+error);
console.error(error);
})
}
const UpdateCrud =( {navigation, route} ) =>{
const { num, name, course } = route.params;
const [ upName, setUpName ]= useState(name);
const [ upCourse, setUpCourse ]=useState(course);
return(
<View >
<TextInput
style= { [styles.input, {borderColor:"blue"} ]}
placeholder={name}
onChangeText={setUpName}
value={upName}
maxLength={24}
/>
<TextInput
style= { [styles.input, {borderColor:"blue"} ]}
placeholder={course}
onChangeText={setUpCourse}
value={upCourse}
maxLength={24}
/>
<Button
style= {styles.button }
title={"Mettre à Jour"}
onPress={() =>{UpdateRecord(num, upName,upCourse),
navigation.navigate("Crud")
}
}
/>
</View>
)
}
const styles = StyleSheet.create({
button: {
paddingHorizontal: 8,
paddingVertical: 6,
borderRadius: 4,
backgroundColor: "oldlace",
alignSelf: "flex-start",
marginHorizontal: "1%",
marginBottom: 6,
minWidth: "48%",
textAlign: "center",
},
input: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
},
});
export default UpdateCrud;