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 ;
Cliquer pour agrandir l'image

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.

    Cliquez sur le bouton pour copier le code
    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;