# ASTROPORT crew onboarding Pour ceux qui veulent s'immerger dans les choses qui font fonctionner le réseau Internet ## Quelques savoirs de base (videos) Merci de préciser les concepts où vous êtes arrivés avant les **AstroLessons** ### TCP/IP {%youtube 7Zf203Vmbig %} ### CPU/RAM {%youtube p3q5zWCw8J4 %} ### BASH {%youtube DQeBbPsGoHY %} ### CODE {%youtube QXjU9qTsYCc %} ### SOCKET {%youtube oWE6-z7IFyE %} ### CRYPTO {%youtube -PoJqTNY1eI %} ### HASH {%youtube lik9aaFIsl4 %} ### IPFS {%youtube 7MGMkGq60VU %} ### ASTROPORT On arrive à "ed25519" le format de chiffrage utilisé par scuttlebutt, gchange, cesium, duniter. et astroport dans IPFS. https://chaton.g1sms.fr --- ## AJAX Web_2.0 level ### Exemple de requête Ajax simple avec JQuery et PHP. Tous les echanges entre machines (logiciels et humains) procèdent d'un mécanisme simple (une requête, une réponse). Au temps du Web1.0, la page entière était la requête/réponse. Le Web2.0 est la subidivision des pages en **"div"** (faites un clic droit, voir le code et cherchez "div") ces sections alors se sont misent à correspondre à la séquence requête/réponse, ce phénomène prit le nom de code AJAX, et jQuery fut sa première librairie. Amenant l'apparition de framework plus contraignants, à mon sens. Détaillons comment ajax gère un formulaire... avec php du coté serveur, mais tous les languages (même du shell, mais on ne le fait pas par sécurité) peuvent être utilisés. [Allez c'est parti, en video](https://www.youtube.com/results?search_query=ajax+php+explain+jquery+fran%C3%A7ais) ou à lire... Tout d'abord, vous devez comprendre qu'une requête Ajax est comme n'importe quelle autre requête. La seule différence est que l'utilisateur n'a pas besoin de recharger la page. Par exemple, il n'a pas besoin de recharger la page : Au lieu d'envoyer une demande POST avec un formulaire, vous pouvez envoyer une demande POST via Ajax. Cela permettrait à l'utilisateur de soumettre le formulaire sans avoir à naviguer vers une autre page. OK, commençons. Il s'agit d'une requête Ajax GET de base : ``` $.ajax({ type: "GET", url: 'test.php', success: function(data){ alert(data); } }); ``` Dans le code ci-dessus, il y a trois paramètres / options : * **type** : C'est le type de requête HTTP que vous voulez effectuer. Dans cet exemple, j'envoie une requête GET. Si vous voulez envoyer une demande POST à la place, il suffit de changer "GET" en "POST". * **url** : C'est l'URL à laquelle nous voulons envoyer une requête Ajax. Dans ce cas, il s'agit de "test.php". Vous pouvez la changer en "example.php" ou "folder/example.php" si vous le souhaitez. N'oubliez pas que l'URL est relative à la page sur laquelle se trouve l'utilisateur. * **success** : C'est la fonction qui est appelée si la requête a réussi. Notez que cette fonction a un paramètre appelé data, qui contiendra la sortie de test.php. C'est-à-dire que si test.php imprime la chaîne "OK", alors cette variable de données contiendra la chaîne "OK". Il est important que vous jouiez avec le code ci-dessus, c'est-à-dire que vous changiez "GET" en "POST" et modifiez l'URL. Rappelez-vous : vous devez utiliser les outils de développement intégrés dans Firefox / Chrome pour déboguer vos requêtes Ajax. Généralement, ces requêtes apparaîtront dans l'onglet "Réseaux" sous XHR. Sans ces outils de développement, il peut être incroyablement difficile de comprendre ce qui se passe réellement. Ces outils de développement vous permettront de visualiser la requête. Ils vous permettront également de savoir si une demande est en train d'échouer. Que faire si nous voulons ajouter des paramètres GET (query string parameters) à notre requête Ajax ? ``` $.ajax({ type: "GET", url: 'test.php', data: {name: 'Wayne'}, success: function(data){ alert(data); } }); ``` Comme vous pouvez le voir, j'ai ajouté un nouveau paramètre appelé "données". Il s'agit d'un objet JavaScript contenant les données que nous voulons envoyer dans la requête. Dans ce cas, comme nous envoyons une requête GET, ces paramètres seront automatiquement ajoutés à la chaîne de requête comme suit : test.php?name=Wayne Si je veux ajouter plusieurs variables GET, je peux le faire comme ça : ``` $.ajax({ type: "GET", url: 'test.php', data: {name: 'Wayne', age: 27, country: 'Ireland'}, success: function(data){ alert(data); } }); ``` Une demande d'EEG sera envoyée à l'adresse suivante : **test.php?name=Wayne&age=27&country=Irlande** Plutôt simple, non ? Comme toujours, vous devriez jouer un peu avec le code, juste pour vous faire une idée. Essayez d'ajouter et de supprimer des paramètres, juste pour voir si vous comprenez bien comment envoyer des données via une requête Ajax JQuery. D'accord, mais que faire si nous voulons envoyer une requête POST à un fichier appelé **submission.php** ? ``` $.ajax({ type: "POST", url: 'submission.php', data: {name: 'Wayne', age: 27}, success: function(data){ alert(data); } }); ``` Comme vous pouvez le voir, j'ai changé le type de "GET" en "POST" et j'ai changé l'url en submission.php. Dans cet exemple particulier, le nom et l'âge seront envoyés en tant que variables POST (parce que nous avons défini la requête à "POST"). Cela signifie qu'ils peuvent être accessibles dans **submission.php** de cette manière : ``` $name = $_POST['name']; $age = $_POST['age']; ``` S'il s'agissait d'une requête GET, les variables auraient été envoyées via la chaîne de requête, ce qui les aurait rendues accessibles de cette manière : ``` $name = $_GET['name']; $age = $_GET['age']; ``` Comme vous pouvez le voir, ces variables sont accessibles de la même manière que dans une requête normale. La dernière pièce du puzzle est la fonction de succès, car c'est la fonction qui est appelée si la requête Ajax est terminée avec succès. Dans les exemples ci-dessus, je ne fais qu'alerter les données renvoyées. Cependant, dans la plupart des cas, vous utiliserez la fonction pour montrer des messages d'interface utilisateur à l'utilisateur. Par exemple, si l'utilisateur soumet le formulaire via Ajax, alors vous utiliserez cette fonction de succès pour vérifier la réponse et lui fournir la confirmation que le formulaire a été soumis avec succès. Nous espérons que cet article vous a appris les bases ! ### Gérer les erreurs Ajax avec jQuery. À partir de JQuery 3.0, vous devez utiliser **done**, **fail** et **always** Un exemple d'utilisation de "done and fail" : ``` $.ajax("submit.php") .done(function(data) { //Ajax request was successful. }) .fail(function(xhr, status, error) { //Ajax request failed. var errorMessage = xhr.status + ': ' + xhr.statusText alert('Error - ' + errorMessage); }) ``` La fonction d'erreur Ajax comporte trois paramètres : * jqXHR * textStatus * errorThrown En réalité, l'objet jqXHR vous donnera toutes les informations que vous devez connaître sur l'erreur qui vient de se produire. Cet objet contiendra deux propriétés importantes : * **status** : C'est le code d'état HTTP que le serveur a renvoyé. Si vous exécutez le code ci-dessus, vous verrez qu'il s'agit de 404. Si une erreur interne du serveur se produit, la propriété status sera 500. * **statusText** : Si la requête Ajax échoue, alors cette propriété contiendra une représentation textuelle de l'erreur qui vient de se produire. Si le serveur rencontre une erreur, alors cette propriété contiendra le texte "Internal Server Error". Évidemment, dans la plupart des cas, vous ne voudrez pas utiliser un vilain message d'alerte JavaScript. Au lieu de cela, vous créerez un message d'erreur et l'afficherez au-dessus du formulaire Ajax que l'utilisateur essaie de soumettre. ### Soumission du formulaire Ajax avec PHP. Il s'agit d'un tutoriel de base sur la façon de créer un formulaire Ajax qui soumet des données POST à un script PHP. Pour cet exemple, nous allons créer deux fichiers : 1. La page web qui affiche notre formulaire. 2. Le script PHP qui reçoit les données de notre formulaire via Ajax. Notre page web d'exemple, qui contient le formulaire et le script de soumission Ajax ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Example Ajax PHP Form</title> </head> <body> <form id="my_form_id"> Your Email Address: <input type="text" id="email" /><br> <input type="submit" /> </form> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(document).ready(function(){ $('#my_form_id').on('submit', function(e){ //Stop the form from submitting itself to the server. e.preventDefault(); var email = $('#email').val(); $.ajax({ type: "POST", url: 'submission.php', data: {email: email}, success: function(data){ alert(data); } }); }); }); </script> </body> </html> ``` Une explication du code ci-dessus : 1. Nous avons créé un formulaire HTML de base qui permet aux utilisateurs de soumettre leur adresse électronique. Notez que nous avons donné à notre élément de formulaire l'ID "my_form_id" et que nous avons donné à notre champ de texte l'ID "email". Lorsque vous utilisez JavaScript et JQuery, il est extrêmement avantageux de donner à vos éléments HTML un ID unique, simplement parce que cela facilite leur accès. 2. Nous avons inclus la bibliothèque JQuery du CDN JQuery. 3. Dans notre JavaScript personnalisé, nous plaçons notre code à l'intérieur de la fonction de préparation des documents, tout simplement parce que nous ne voulons pas que notre JS soit exécuté avant que la page ait été correctement chargée. 4. Nous attachons un gestionnaire d'événements à notre élément de formulaire. Ce gestionnaire d'événements est appelé chaque fois que l'utilisateur tente de soumettre le formulaire (lorsqu'il appuie sur la touche "Entrée" ou clique sur le bouton "Soumettre"). Notez la façon dont nous avons référencé notre formulaire par son ID, qui est "my_form_id". 5. Une fois que l'utilisateur a tenté de soumettre le formulaire, nous empêchons l'événement / le comportement par défaut d'avoir lieu. N'oubliez pas que le comportement par défaut d'un formulaire web est de se diriger vers l'URL d'action. Lorsque l'URL d'action n'est pas spécifiée (comme dans notre exemple), il tentera de se soumettre à la page en cours. Nous ne voulons pas que cela se produise, car cela rechargerait la page et empêcherait notre requête Ajax d'être exécutée. 6. Nous saisissons la valeur que l'utilisateur a entrée dans le champ de texte du courriel (nous référençons ce champ de texte par son ID). 7. Nous exécutons une requête Ajax POST vers notre script de soumission, qui est **submission.php** Si vous exécutez l'exemple ci-dessus, vous verrez que le formulaire est soumis via Ajax et que notre JavaScript alerte la sortie qu'il a reçue de notre script PHP. ### Notre fichier PHP. Notre fichier PHP (nous l'avons appelé submission.php) qui traite les données du formulaire est assez simple ``` <?php $emailAddress = false; if(isset($_POST['email'])){ $emailAddress = $_POST['email']; } echo 'Received email was: ' . $emailAddress; ``` En gros, il prend la valeur POST que nous avons soumise via Ajax avant de l'imprimer. Notre script Ajax recevra cette sortie dès que la demande aura été complétée. Évidemment, votre script PHP sera probablement un peu plus complexe, car il pourrait s'agir d'envoyer un courriel ou d'insérer des données dans une base de données. --- Travail Pratique https://www.copylaradio.com/forum/aide-1/question/je-n-arrive-pas-a-enregistrer-ma-webradio-comment-ajouter-un-module-3 SOURCES https://thisinterestsme.com/ajax-form-submission-php/