Comment faire un appel Ajax avec React axios et script PHP POST

Comment faire un appel Ajax
avec React axios et script PHP POST ?

Comment faire le plus simplement du monde comme un appel Ajax avec les frameworks React et Axios ?

Dans ce tuto ou tutoriel nous allons voir comment envoyer vos données et retourné ces même données sur votre page avec les langages PHP javascript et les framework javascript react et Axios.

Pour l’exemple nous allons utiliser
un code très simple et épuré avec seulements des CDN.

Voici le résultat final :

Code html/css ET JAVASCRIPT index.php


<!DOCTYPE html>
<html lang="fr">
<head> 
<meta charset="UTF-8"> 
<title>Tuto React</title> 
<script src="https://unpkg.com/@babel/standalone/babel.min.js">
</script> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> 
</head> 
<body> 
<div id="app"> 
</div> 
</body>


<script type="text/babel">

class App extends React.Component { 
componentDidMount(){ 
var params = { test: '1',}; 
axios.post('./ajax.php/', { params }).then(res => { console.log(res.data) }); 
} 
render() { 
return ( <div>Appel Ajax !</div> ); 
} 
}

ReactDOM.render(<App />, document.getElementById('app')); 
</script> 
</html>

Code PHP ajax.php


header('Access-Control-Allow-Origin: *');
$data = json_decode(file_get_contents("php://input"), true);
echo $data["params"]["test"];

Structure

Dans le même dossier
index.php
ajax.php

Comment rester concentré 7h à 8h ?

Comment rester concentré 7h à 8h par jour ?

Les pires journées sont celles que l’on passe devant son ordinateur à faire autre choses que ce que l’on devrait faire.
C’est tellement désespérant de finir sa journée et de n’avoir encore rien fait d’important.
La fatigue et le stress se cumulent en fin de journée et quand on rentre à la maison pour voir sa famille, il nous arrive de pas être réellement avec eux car on pense encore au boulot .

Le problème c’est que notre attention n’est pas orienté vers nos vrais problème au bon moment.
Tandis que lorsque les problèmes sont réglés, cela fait une très grande différence dans notre fin de journée, on se sent plus accompli, motivé et ravis de revenir vers nos proches.

Comment rester concentré 7h à 8h par jour et garder son attention sur son travail ?

Je vous présente mes 12 mesures draconiennes :

Notre cerveau est n’est efficace que lorsqu’il traite une et une seule action complexe à la fois, nous allons voir comment réduire le nombre de tâches parasites et se concentré sur les tâches importantes.

Créez votre bulle sonore

Quelque soit votre lieu de travail, il est généralement parsemé de petits bruits,
Bruit extérieur, bruit à l’intérieur si il y a plusieurs personne avec vous.

Isolez vous autant que possible.
Prenez des écouteurs ou un casque bien visible et montrer que vous n’écoutez personne.
Puis camoufler le bruit environnant avec 3 sons :

Coffitivity qui simule des bruits de café ( https://coffitivity.com/ )
Bruit de pluies ou de son de la nature (youtube )
Une faible mélodie style piano ou voix mélodieuse mais sans parole qui pourrait vous ambiancé dans un rythme, juste assez pour créer une ambiance.

Le but est de créer une bulle sonore pour éviter le maximum d’interruptions et de perturbation ( l’idéal est que vos collègues soient forcé de vous faire des grands gestes pour vous interrompre )

Rangez votre bureau

L’ordre et la discipline doivent régner en maître sur votre bureau,
plus votre bureau sera clean plus votre cerveau le sera à son tour.
( pareil pour votre desktop sur ordinateur)

Coupez votre téléphone

Désactivez les notifications de votre smartphone.
Forcez vous à ne pas regarder vos mails sauf en début et en fin de demi-journée.
99% des mails que vous recevez ne sont pas des urgences.
Si vraiment c’est une urgence la personne vous appellera.

Ayez de bons outils

“un mauvaise ouvrier a toujours de mauvais outils”
Veillez à toujours avoir du matériel qui fonctionne.
Une bonne connexion internet, un ordinateur qui ne lag pas, sont des exemples.
Si votre PC est lent, et que ça vous rend fou, recherchez des tutoriels sur Youtube pour l’optimiser.

Listez vos problèmes perso

Parfois il nous arrive au boulot d’être soucieux.
Des pensées de notre vie personnelle nous distrait dans notre travail, ou parfois nous rendent triste.
Problème de santé, de couple.
Malheureusement on ne peut pas toujours y faire grand chose dans l’instant et le travail doit continuer.
La meilleure solution pour laisser ses émotions de côté et d’écrire simplement ses problèmes sur une feuille de papier.
Rationaliser votre situation,en faisant une Todo list de vos problèmes, cela vous permettra de sortir de vos émotions paralysantes.

Les cycles circadien


Des études ont montré comment se comporte notre attention durant une journée de 24 heures.
On s’aperçoit que notre attention et au maximum entre 9h et 11h,
et le soir entre 17h et 20h avec un pic à 19h.

Notre cerveau s’active durant ces heures et nous offre un potentiel d’attention vraiment exceptionnel par rapport au reste de la journée.

Si vous n’arrivez pas à être productif après manger c’est normal, c’est biologique. Nous sommes efficace surtout le matin entre 5h et 11h.

Personnellement je me force à travailler de 9h à 11h intensément pour profiter du pic.
Parfois il m’arrive de faire ma journée de travail entière durant ces 2h.
Et je réserve les périodes de basses attentions pour les tâches administratives, le sport, la famille, les courses etc …

Analysez vos points de frictions

Notez vos points de frictions.
Après une séance de travail pensez à vous analyser.
Qu’est-ce qui vous a fait sortir de votre bulle ?
C’est un exercice qui n’est pas facile car on n’y pense pas sur le coup.
Pour ma part j’ai pu m’analyser.
Lorsque je bloque au niveau de mon code, j’ai tendance à chercher la réponse sur YouTube.
Les propositions faites par le moteur de recherche m’embarque sur des vidéos sans rapport.
Bien souvent m’en font oublier le pourquoi de ma venue.
Mais quand on connaît ses faiblesses il est plus simple de déjouer ses propres pièges mentaux.

Faites ce qui est facile en premier

Faire ce qui est facile en premier est motivant.
Car c’est en cumulant les petites victoires que vous allez augmenter votre confiance en vous.
Généralement on a tendance à vouloir faire le contraire, le plus gros en premier.
Mais on se risque à des journées improductif.
Finir sa journée sans pouvoir se raccrocher à des tâches fièrement accomplies n’est pas motivant et baisse notre concentration pour le lendemain.

Avoir un chaperon

Je ne sais pas si ça marche pour tout le monde, mais le fait d’être observer me force à travailler bien et à ne pas m’éparpiller sur Internet.
Lorsque je travaillais à distance avec mon associé, j’étais capable de faire des journées de 9h 18h, sans interruption et d’accomplir des montagnes de travail. Il me disait « t’es un bosseur ! ».
Mais malheureusement je ne suis pas aussi efficace seul.

Alors j’utilise parfois des logiciels de streaming pour enregistrer mes journées de travail, pour me sentir obsjerver, cela m’aide à rester concentré sur la tâche en cours, faire le minimum de recherche internet et avancer efficacement.

Déléguez et faites ce que vous aimez

Des fois nous n’arrivons pas à faire les choses juste parce que ce n’est pas fait pour nous.
Déléguer est parfois la solution.

Une fois je n’arrivais vraiment pas à faire un bout de code complexe, ça faisait 2 jours que je bloquais, j’étais dépité.
Puis je me suis décidé à appeler un prof.
Il m’a pris quelques euros et mon problème était réglé au bout d’une heure.
Il m’a résolu mon problème en 1h, incroyable ! c’était enfin finis et c’était si rentable.
J’ai pu ensuite continuer sur mon programme en toute sérénité.

La TODOLIST d’une case

Quand vous n’arrivez vraiment pas à vous concentrer.
Ranger votre todolist g”ante, sortez une feuille de papier et n’inscrire qu’une seule et une seule chose.
Puis ne passer à aucune autre tâche tant que celle ci n’est pas accompli.

Parler clairement à votre entourage

Expliquer clairement à votre entourage les heures durant lesquels vous ne voulez pas être dérangé.
En échange accordez un temps d’écoute plus qualitatif à votre entourage en dehors de ces heures.
Votre entourage appréciera et vous encouragera.

La bougie

Certaines odeurs de bougies, notamment au jasmin, facilitent la concentration.
Pour ma part, c’est surtout le fait d’avoir une lumière chaude juste à côté de moi qui m’apaise l’esprit et me permet d’être plus endurant.

Quels languages apprendre pour créer une applications en 2019

Quels languages apprendre pour créer une applications en 2019 ?

Le monde de la programmation est en expansion
grâce à de plus en plus d’objet connecter,
d’application mobiles, de logiciel professionnel, et internet qui facilite grandement la communication.

Maintenant des entreprises peuvent surgir de nul part faisant des milliards d’euros de chiffres d’affaire avec quelques ordinateurs connecter au web et défiant les revenus colossaux d’empire immobilier.

Peut être que cela vous inspire et que vous aimeriez vous aussi créer une nouvelle application.
Mais quand on veut commencer à coder, on ne sait pas toujours par ou commencer et quels langages permet vraiment de réaliser une application.

La première question que vous devez vous poser, c’est :

Quel type d’application j’ai envie de créer et sur quel support fonctionnera mon application ?

Application sur mobile ? Android ? Ios ( Apple ) ?
exemple : instagram, snapchat, whatsapp etc…

Application web ? ( accessible depuis n’importe quel navigateur )
exemple : facebook, amazon, site e-commerce, réseaux sociaux etc…

Application native ? ( utilisation privé sur un ordinateur, ou sur un écran tactile)
exemple : bornes de commandes chez McDonald

Car selon votre choix, vous ne devrai pas apprendre les mêmes langages de programmation.

Plusieurs langages sont possible pour réaliser ces applications,
Ici je ne vais pas cité tous les langages existant mais seulement ceux que je recommande et qui répondent à 3 critères :

1 – Ils ont une forte popularité et une grande communauté
2 – Ils ont de nombreuses documentations et des tuto sur le web
3 – Sont facile à apprendre pour débuter

Je commence par ma spécialité :

La création d’application web

Pour coder une application vous devrez connaître plusieurs langages de programmations :

HTML & CSS
Pour la partie design, vous devrez connaître les langages de programmation
Html et CSS, ils sont 2 langages qui vont de paire, l’un est le squelette de votre page web et l’autre gère l’habillage, le design, la coloration, quelques animations très simpliste avec le CSS3

PHP / MySQL
Pour que votre application web soit plus qu’un site statique elle doit posséder une mémoire,
par exemple pour se rappeler des utilisateurs, leurs photos de profil, leur actualité etc…
Comment est-ce doit on faire ?
on utilise le langage MySQL pour écrire des informations dans la bases de données.
Mais pour faire la transition entre votre page écrite en HTML et CSS et votre base de données vous devez utiliser un langage intermédiaire et qui le PHP
Les formulaires html permettent d’envoyer des informations dans votre code PHP et celui ci pourra déclencher un code MySQL qui lui agira sur votre base de données.
Le langage PHP ne permet pas uniquement de faire la transition avec la base de données mais il sert aussi à faire des calculs complexes, envoyer des mails, créer des fichiers téléchargeable, vérifier l’identité d’un utilisateur et d’autres fonctionnalités super chouettes.

Framework recommandé : Symfony 4

Javascript / JSON
Si vous souhaitez par la suite que votre site web soit animé, avec des transitions pour renforcer son design vous pouvez utiliser le langage JavaScript.
Ce langage ne permet pas uniquement de faire de l’animation mais il peut également passer des informations dans la base de données de manière dynamique c’est-à-dire sans recharger votre page, comme c’est le cas d’un formulaire d’inscription.
Cela vous permettra de changer des tableaux à la volée.
Cette transition s’appelle la méthode Ajax

Frameworks recommandés : Jquery, ReactJS

Application Mobile Android

XML
le langage XML ressemble beaucoup au langage HTML mais on préfèrera le langage XML pour s’adapter facilement sur Linux

JAVA
Le langage Java ressemble au un langage PHP et auC++ et il a lui aussi cette particularité de s’adapter facilement sur Linux et de plus il n’a pas besoin de serveur pour fonctionner comme c’est le cas du php.

Javascript pour les animations

Même frameworks recommandés : react native

Json PHP Mysql
cette fois-ci pour que votre application mobile puisse enregistrer des données, on utilisera un serveur PHP avec une base de données.
Le serveur PHP n’est pas installé sur votre smartphone mais sur un hébergeur et pour que celui-ci puisse communiquer avec l’application mobile nous utiliserons des Web Services
Le web service et une page PHP qui est cachée et sécurisée avec une clé cryptée
et cette page peut recevoir des commandes qu’elle pourra traiter pour enregistrer vos informations dans votre base de données.
Pour encoder les informations dans l’url de votre page PHP vous devez les encoder dans le langage JSON.

Application mobile IOS

C++
C++ un langage très ressemblant au PHP, c’est un langage orienté objet,
à la différence que vous devrez l’utiliser également pour créer votre interface.
Vous ne pourrez pas utiliser HTML et CSS.

Json PHP Mysql

Application Native

L’avantage d’une application native c’est qu’elle est beaucoup plus réactive qu’un site web et plus performante puisqu’elle utilise directement les ressources de la machine sur laquelle elle est installé.

C#
Je vous préconise C# qui est aussi un langage orienté objet encore différent mais qui ressemble beaucoup C++.

Frameworks recommandés : Asp.Net, Umbraco

MySql pour gérer les bases de données
Javascript pour gérer les animations

Si vous souhaitez plus d’informations visitez les autres articles du site qui vous apporteront plus de précision.