Archives de
Auteur : Dayo

Ajouter une option dans WordPress puis la récupérer avec l’API REST

Ajouter une option dans WordPress puis la récupérer avec l’API REST

Dans cette article nous verrons comment ajouter une option dans les réglages de WordPress, puis comment la récupérer avec une route REST personnalisé.

La première étape est donc d’ajouter une nouvelle option dans l’onglet Général:

Ce qui donnera :

L’étape suivante est d’ajouter une route personnalisé a l’API REST de WordPress:

La route sera donc « dayo/v1/map/key » et renverra la valeur de l’option « dayo_map_key ».

La dernière partie de code PHP est celle qui fournira au JavaScript les informations pour la requête :

Dans le code JavaScript, nous utilisons la variable DAYO que nous avons fournit en PHP afin d’effectuer une requête

Et voila comment ajouter une option dans les réglages de WordPress et la récupérer avec l’API REST.

Docker et PHP

Docker et PHP

Après un petit bout de temps à maintenir et mettre a jours php, apache et mysql sur mon par diverse moyen j’ai décidé de passer a docker. Il m’a fallut plusieurs essaie et tâtonnement pour arriver à une configuration qui me convient pour un environnement de développement.

C’est disponible sur ce dépôt github. Il y a deux conteneurs.

Le premier et le conteneur mysql de base avec un seul utilisateur root et comme mot de passe root.

Le second est un conteneur php avec apache plus quelques extensions ainsi que composer accessible par la commande composer :

  • apcu
  • xdebuh
  • intl
  • opcache
  • gd
  • mysqli
  • pdo
  • zip

Apache est configuré avec ssl et rewrite.

Pour utiliser xdebug, mettez à jour le fichier php.ini avec votre IP pour  xdebug.remote_host=192.168.1.10 puis dans l’url ajoutez « ?XDEBUG_SESSION_START= »

 

API Platform + FOSUserBundle + LexikJWTAuthenticationBundle

API Platform + FOSUserBundle + LexikJWTAuthenticationBundle

  • Symfony: 3.2.2
  • API Platform: 2.0.3
  • FOSUserBundle: 2.0.0-beta2
  • LexikJWTAuthenticationBundle: 2.1.1

En premier lieu nous allons cloner le dépôt API Plaftorm:

Une fois fait, nous installons FOSUserBundle et LexikJWTAuthenticationBundle via composer:

Puis nous activons les bundles fraichement installé dans AppKernel.php:

Nous créons notre entité User.php:

Nous poursuivons par la génération des clés, notez bien la pass phrase qu’il faudra copié dans le fichier parameters.yml

Nous mettons a jours les fichier suivants:

config.yml:

routing.yml

security.yml

parameters.yml.dist et parameters.yml, n’oubliez pas la pass phrase pour les clés

Puis nous mettons à jour la base de données et créons notre premier utilisateur:

Pour tester ca un petit coup de Curl:

Et comme réponse nous avons:

Et voila !!!

Disponible sur github.

Vue.js partie 2

Vue.js partie 2

Allons un peu plus loin en ajoutant un formulaire et une collection de livre.

Commençons par Vue.js. Pour ajouter un livre à une collection, il nous faut donc une collection de livre, un tableau feras l’affaire:

Afin de commencer avec de livre, nous utilisons la fonction suivante qui est appelé lors de l’instanciation de Vue.js:

Il nous reste une dernière chose a faire en Javascript, l’ajout d’un nouveau livre lors de l’envoie du formulaire. pour cela nous définissons une fonction qui vérifie que le livre que l’on veux ajouter à bien un nom, puis nous l’ajoutons a notre tableau et enfin réinitialisons le formulaire:

Passons maintenant que html. De côté là, la première chose et d’ajouter un bouton qui va faire appelle a notre fonction Javascript:

La syntaxe  v-on:click="ajouterLivre"  permet de dire à Vue.js d’invoquer la fonction ajouterLivre lors de l’événement click.

Dernière étape, afficher notre collection de livres. Pour cela nous allons itéré sur notre tableau et afficher chacun de livres en utilisant  v-for  :

Et voila, avec un peu de css vous pouvez voir ça ici.

 

Vue.js – partie 1

Vue.js – partie 1

Pour commencer à découvrir Vue.js, voyons avec un exemple simple comment fonctionne le Twoway Binding.

Le code suivant permet de bien comprendre le Two-way Binding en action:

Commençons par le javascript, nous instancions Vue.js avec deux options:

  • el: '#livres', fournit a Vue.js sa zone de travail dans le DOM
  • data: { livre: {nom: '', commentaire: '', lu: ''} } décrit les données qui serons accessible par Vue.js dans sa zone de travail

Pour la partie html du code, deux élément aussi:

  • v-model cet attribue permet à Vue.js de faire le lien avec le modèle décris plus haut
  • la syntaxe {{livre.nom}} permet d’afficher la valeur stocké par Vue.js pour cette variable.

Pour voir ce code en action: c’est par ici.