serveur web apache php

Limites de connection sur serveur Apache

Voici une commande linux pour connaitre le nombre de connexions simultanée acceptable par votre serveur:

#ab -c 5 -n 10000 http://www/domain.com/fichier.php

il est important de spécifier le fichier, http://www.domain.com/ ne marche pas

Mysql logo

MysqlTuner votre compagnon de route indispensable !

Pour installer mysqltuner sous Debian:

apt-get install mysqltuner

ensuite entrez

#mysqltuner

il est conseillé d’attendre d’avoir au moins 24 heure de stats mysql pour faire des analyses.

Mysqltuner est un premier pas pour dégrossir les optimisations les plus évidentes pour mysql.

php

Mysql voir les logs

si vous commencez sérieusement à tâter du webmastering, vous serez confronté à des problématique d’optimisation de mysql.

Ce dernier à une grande influence sur la vitesse de chargement d’un site web, surtout pour des gros CMS ou un logiciel de e-commerce comme Prestashop.

 

Aussi il faut analyser les logs pour voir ce qui se passe sous le capot. Mais où sont les logs Mysql??

Pour commencer il faut aller voir le fichier de configuration de mysql my.cnf.

Ce dernier se trouve souvent dans /etc/mysql

ensuite dans ce fichier il faut regarder s’il y a une directive qui va logger les requ^tes sql.

Aller dans la section [msqld] et la ligne suivante doit s’y trouver:

[msqld]

log=/tmp/mysql.log

mysql.log est le fichier texte qui doit reccueillir les requêtes sql faites, il grossit vite !

maintenant que vous savez où sont les logs il est temps d’aller voir comment auditer la performance de mysql sur votre serveur dédié, premiers pas vers un meilleur et plus rapide site web !

php

Retrouver le dernier id inséré dans Mysql

Souvent il peut vous arriver d’insérer une enregistrement, et d’avoir besoin de connaitre l’id de cet enregistrement que vous venez d’insérer.

Si vous ne connaissez pas la méthode, vous devez sélectionner l’id maximal pour avoir cet id. Mais dans une environnement où plusieurs utilisateurs créent des enregistrement, vous pouvez avoir de mauvaises surprises.

La méthode qui est présentée va vous permettre d’avoir à coup sûr l’id que VOUS avez créé et non un autre.

Imaginons que vous avait fait la requête suivante :

insert into `table` (`id_pays`,`nom_pays`) values ( », »)

$db->insert_id  va vous donner l’id dernièrement créé par vous et on un autre.

$db est l’objet de connexion à votre base de donnée mysql.

javascript

JSON Javascript Object Notation

A quoi sert la notation JSON

Le JSON ( Javascript Object Notation) est un format d’échange de données très utilisé dans le domaine du web et pas forcément que dans du Javascript. En fait PHP aussi possède des fonction pour encoder un tableau associatif en tableau JSON.

Vous aurez besoin de JSON quand vous allez faire de l’AJAX. Où quand vous allez faire appel à une API chez n’importe quel fournisseur de service Saas possédant une API digne du nom.

Explication de la syntaxe JSON

Un objet JSON est écrit dans des accolades.

{action:edit,id:1956} cette chaîne JSON va inclure comme clé de tableau action et id. Par exemple vous avez une application web en AJAX qui permet d’éditer, d’effacer, un article ou un item identifié par son id. Quand vous cliquez sur le lien « Editer », une action AJAX va envoyer un tableau JSON contenant comme information le type d’action et l’id de l’objet à effacer.

Utiliser en PHP et AJAX

On utilise couramment JQuery pour des traitement AJAX, n’essyez pas de le coder vous même en Javascript pure (compliqué, sujet aux erreus)

Imaginons que vous avez une page html dynamique écrite avec PHP et que vous avez un bouton qui va rafraichir une partie de la page (cours de bourse de Michelin par exemple), en cliquant sur le lien « Rafraichir cours de bourse », un appel AJAX est fait à un script PHP « update_cours_de_bourse.php » (dans la réalité je le nommerais do.php tout simplement).

Ce fichier do.php va calculer le cours de bourse de Michelin et retourner un tableau JSON, on utilisera simplement la commande echo de PHP pour afficher les valeurs JSON :

echo {label:michelin,cours:26.5}

le résultat sera lu par JQuery de la page appelante, grâce à une fonction callback (une fonction qui lit la valeur retournée par la page do.php).

php

Accéder à la documentation PHP depuis votre navigateur

C’est un pur hasard si ce plugin pour Chrome s’appelle PHP Ninja, je n’ai aucune affiliation avec ce plugin.

De nos jours, à l’ère du multitasking, notre mémoir fait de plus en plus défaut, et l’on doit souvent revenir à la documentation de PHP. Je vais personnellement souvent sur php.net, même si je trouve que la navigation du site est bien faite, j’aurais souhaité accéder encore plus vite à la documentation sans ouvrir une nouvelle page web.

Grâce à ce plugin, ce rêve est réalisé.

Il ne marche que sous Chrome cependant et il n’y a pas d’équivalent proche sous Firefox. Pour l’installer allez dans votre navigateur chrome et aller le webstore et tapez simplement « PHP Ninja » et ensuite installez le plugin !

Maintenant un bouton à côté de la barre de recherche est disponible en permanence pour retrouver dans la documentation la fonction souhaitée.

PHP Ninja à l’usage

Une fois que vous avez installé le plugin, il vous suffit de cliquer dessus et de rentrer le nom de la fonction, vous aurez un texte qui est pompé sur le site php.net.

php

Accélérez votre site web avec un cache Opcode

Toujours sur un serveur dédié, et sous Debian voici la procédure à faire pour accélérer votre site web:

  1. Installez APC : aptitude install php-apc
  2. Configurer le fichier  php.ini en éditant le ichier  « /etc/php5/conf.d/apc.ini » et en ajoutant: apc.enabled=1
    apc.shm_segments=1
    apc.shm_size=128
  3. Redémarrez Apache
  4. Créez une page web pour pourvoir monitorer les performances de ce cache (remplacez mysite par le bon répertoire de votre serveur) :gzip -dc /usr/share/doc/php-apc/apc.php.gz > /home/mysite/public_html/apc.php

Voilà c’est tout !

git versioning

Git publickey access denied

Lorsque vous avez ce message d’erreur alors que vous pensez n’avoir rien fait et que cela marchait très bien il y a peu de temps, cela veut tout simplement fdire que la clé public n’est pas atteignable, et donc l’accès au repository de Github vous est refusé.

Une des raisons qui m’est arrivé est que j’ai voulu changer le répertoire par défaut pour un site, car je voulais tomber sur le répertoire public_html après le login en ssh.

Avant quand je me loggais je tombait sur /home/monsite, mais je voulais tomber sur /home/monsite/public_html (je suis sous Debian)

J’avais créé ma clé ssh dans le répertoire /home/monsite/.ssh

Après avoir fait cette modification (modifier le fichier /etc/passwd), je ne pouvais plus faire un git pull, j’avais le message d’erreur « access denied ».

Récapitulons, git pense trouver ma clé ssh dans le répertoire /home/monsite/public_html/.ssh, mais en fait ce n’est pas à cet endroit qu’elle a été créée.

J’ai dû modifier le fichier /etc/passwd pour retrouver l’ancien paramétrage.

git versioning

Reconstruire un repertoire git quand il n’existe plus

Récemment j’ai changé de serveur un site entier, mais j’ai oublié de copier le répertoire .git !

Donc il m’était impossible de faire un pull pour avoir la dernière version sur mon serveur de production !

Pour ce faire il faut recréer un répertoire .git dans le serveur de production.

git init

git branch -d testbranch

git add .

git commit -m "import fichiers locaux"

Ensuite il faut configurer le repository distant

git remote add origin git@github.com:/compte/projet.git

#télécharger les fichiers distants

git fetch --all

revenir à la branche master

git checkout remotes/origin/master
git checkout -b master

Effacez la branche test

git branch -d testbranche

Dans mon cas j’avais un répertoire nouveau que j’ai accidentellement ajouté, il m’a fallut revenir à un commit précédent du repository distant, effacer la branche master, et créer de nouveau la branche master à partir du commit précédent.

Linux

Introduction à l’utilisation de AWK

AWK est un programme qui permet de manipuler les lignes dans un fichier texte, dès qu’on parle AWK, on est dans le monde Linux.

Quand est ce que AWK est utile?

En général, lorsque vous devez transporter des données d’une système à un autre, par exemple, vous devez extraire des références d’une base sous SQL Server en environnement Windows, que vous devez comparer avec une base de données sous Mysql dans Linux. En gros lorsque vous n’avez aucune possibilité d’avoir un outil ou un programme pour le faire, alors AWK est votre sauveur, car il est puissant et permet de traiter de très gros fichiers, de façon très libre, donc vous pouvez avoir des possibilités très grandes.

Exemple 1 : simple réutilisation des données sans altération avec Awk

imaginons que vous ayez un  fichier texte « text.txt » avec des noms et prénoms

Dupont Jean
Guynemer Marie
Dubois Robin

Nous allons utiliser Awk pour inverser le nom et le prénom :

awk '{print $2 $1}' test.txt
Jean Dupont
Marie Guynemer
Robin Dubois

Par défaut le séparateur de mot est le caractère espace.

Exemple 2 : Ajout d’une chaine de caractères aux champs existants

awk '{print "Bonjour " $2 " " $1}' test 
Bonjour Jean Dupont
Bonjour Marie Guynemer
Bonjour Robin Dubois

 

Exemple 3 : ajouter la syntaxe de requêtes SQL à une liste de référence

soit la liste de références :

AVR-11

DFV-6

BdD7a

notre fichier est une liste de mots même pas séparés par une virgules, nous devons transformer chaque ligne en requête SQL

INSERT INTO MATABLE (reference) VALUES ('AVR-11')

Syntaxe générale de AWK

Elle est la suivante :

awk [ -F fs ] fichier

awk prend entrée un fichier, mais ne vas modifier le fichier, vous devez générer un nouveau avec les lignes modifiée en utilisant le caractère ‘>’ qui redirige la sortir vers un fichier texte.

Le paramètre F permet d’indiquer un séparateur custom.

Exemple 4 : Construction d’une requête SQL avec caractères spéciaux

Les caractères spéciaux sont les apostrophes, en effet comme d’habitude lorsqu’on met des caractères. test est le nom du fichier contenant les données en csv

Ceci ne marchera pas
awk '{print "INSERT INTO FROM SAGE (ref) VALUES ('$1')"}' test


INSERT INTO MATABLE (nom) VALUES ('Dupont')

Ceci marche:
awk '{print "INSERT INTO FROM SAGE (ref) VALUES (\x27"$1 "\x27)\x3B"}' test

on a en sortie :
INSERT INTO MATABLE (nom) VALUES ('Dupont')

Si on veut ajouter des valeurs en dur il faut mettre entre parenthèses :

awk '{print "INSERT INTO FROM SAGE (ref) VALUES (\x27"$1 "\x27,\x27"valeur en dur"\x27)\x3B"}' test

INSERT INTO MATABLE (nom) VALUES ('Dupont', 'valeur en dur')

Variante avec printf: 

awk '{printf "INSERT INTO FROM SAGE (ref) VALUES (\x27%S\x27,\x27%s\x27)\x3B",$1,"valeur en dur"}' test

Pour du multiligne

awk '{printf "INSERT INTO FROM SAGE (ref) VALUES (\x27%S\x27,\x27%s\x27)\x3B",$1,"valeur en dur";print ""}' test

\x27 est la version hexadécimale du caractère apostrophe. Voici une liste pour votre référence.

Autres exemples

Convertir en fichier CSV

"andros.kim@gmail.com"	"KISS"	"ANDROS"		"Bordeaux"
"jen202@gmail.com"	"GROS"	"JENNIFER"		"Nantes"
$ awk '{print $1 "," $2 "," $3 "," $4}' test

"andros.kim@gmail.com","KISS","ANDROS","Bordeaux"
"jen202@gmail.com","GROS","JENNIFER","Nantes"

Supplément pour enlever les guillemets :

#general pattern : sed 's/find/replace/' file
# le modificateur g (greedy) est nécessaire pour tout enlever
$ sed 's/"//g' test2
andros.kim@gmail.com,KISS,ANDROS,Bordeaux
jen202@gmail.com,GROS,JENNIFER,Nantes
WPF

Comment lire un flux JSON d’un webservice en csharp

Vous devez avant tout créer un compte sur le site openweathermap et générer une clé API (automatique normalement) et attendre environ 10 minutes avant qu’elle ne soit active. Ansuite munide votre clé API, composez l’url suivante et collez al sur la barre d’adresse de votre navigateur web:

http://api.openweathermap.org/data/2.5/weather?q=Toulouse&APPID=ma-cle-api

Ensuite créez une application de type console dans Visual Studio, an vous assurant d’avoir installé la librairie NewtonSoft.JSON pour lire facilement un fichier texte JSON et le transformer en un objet JSON.

using System;
using System.IO;
using System.Net;
using Newtonsoft.Json;

namespace Playground
{
    class Program
    {
        static void Main(string[] args)
        {
            var url = "http://api.openweathermap.org/data/2.5/weather?q=Toulouse&APPID=ma-cle-api";
            var webrequest = (HttpWebRequest)System.Net.WebRequest.Create(url);

            using (var response = webrequest.GetResponse())
            using (var reader = new StreamReader(response.GetResponseStream()))
            {
                var result = reader.ReadToEnd();

                var jObject = Newtonsoft.Json.Linq.JObject.Parse(result);
                Console.WriteLine((string)jObject["weather"][0]["main"]);


                //var text = Convert.ToString(result);
                //Console.WriteLine(text);
                Console.ReadLine();
            }
        }
    }
}

Analysons maintenant le code en détail :

var url = "http://api.openweathermap.org/data/2.5/weather?q=Toulouse&APPID=ma-cle-api";
var webrequest = (HttpWebRequest)System.Net.WebRequest.Create(url);

On déclare une variable à la volée, et on y met une chaine qui est le point du service web (endpoint en anglais)

le mot clé var permet de déclarer une variable non typée, pour des raisons de pratique on le fait souvent.

La seconde ligne est la déclaration d’un objet de type HttpWebRequest, créé via la méthode statique Create de la classe System.Net.WebRequest.

using (var response = webrequest.GetResponse())

Cette ligne est sans doute la plus importante, c’est elle qui va chercher le flux en faisant une requête à travers el web.

Encore une fois on utilise le mot clé var parce que c’est pratiue, mais ce n’est pas le plus rigoureux, il faudrait mettre le type de retour de la méthode GetResponse qui retourne un objet de type WebResponse.

En C# ce n’est pas aussi direct qu’en PHP, vous devez transformer response en un flux avec la ligne suivante :

using (var reader = new StreamReader(response.GetResponseStream()))
{
    var result = reader.ReadToEnd();

    var jObject = Newtonsoft.Json.Linq.JObject.Parse(result);
    Console.WriteLine((string)jObject["weather"][0]["main"]);


    //var text = Convert.ToString(result);
    //Console.WriteLine(text);
    Console.ReadLine();
}

On instancie un StreamReader pour lire le flux retourné par le webservice. La méthode ReadToEnd retourne une chaine de caractère.

Enfin on parse cette chaine de caractère qui est un JSON en fait, et on en fait un objet JObject (survolez la variable pour avoir son type).

Enfin on accède facilement à la donnée qu’on veut en connaissant son chemin grâce au requêtage avec le browser (mais vous pouvez aussi faire un dump dans la console).

 

 

javascript

Premier pas avec le CSS Grid layout

Pourquoi le CSS Grid Layout?

Aujourd’hui pour faire du responsive design en a besoin d’un framework CSS

 

Le premier des framework CSS qui permet de faire du responsive design est bootstrap
Ensuite il y en a eu d’autres j’ai pu utilisé par exemple UIKIT et sémantiqueUI.

 

Mais le problème que je t’ai rencontré été que c’est vrai moi qui était en constante évolution, et passer de l’un à l’autre de ces framework était assez fastidieux, car j’ai utilisé pas la même syntaxe

Pourtant on peut faire du responsive design en CSS pure mais c’est assez fastidieux
il y a les media queries qui vous permettent de réaliser le responsive design.

Mais comme vous le savez le CSS c’est assez difficilement lisible.

Bien sûr il y a des solutions comme le SASS que vous transpilez en CSS mais ce n’est pas encore la solution idéale

Sans parler que le CSS a beaucoup de hacks qu’il faut utiliser pour avoir le même design sur tous les navigateurs

Puis est apparue la technologie flexbox qui résout un peu le problème

Mais cette dernière technologie est unidimensionnel et notre page est à deux dimensions

C’est pour résoudre ses problèmes que le CSS grid a été inventé pour l’instant seulement Google Chrome et Firefox l’ont implémenté

conception moderne de site, le responsive design pour adapter le site web aux différents formats d’écran

Une grille simple le minimum syndical

Une grille simple et responsive cette fois-ci

Le mieux est de combinaison de technologie afin d’avoir le mec plus ultra du design d’un site web. Ainsi en 2017 vous pouvez ne pas utiliser les framework CSS
Vous pouvez vous baser uniquement sur les technologies qui sont embarquées de façon native par les navigateurs web.

datascience

Interagir avec Google Analytics sans ouvrir de navigateur

Introduction au Measurement Protocol ou comment faire du Google Analytics côté serveur

Google analytic est un outil pour mesurer le trafic Web sur votre site web. Il nécessite de mettre un bout de code pour traquer les visites des internautes

Mais il est aussi possible d’envoyer les informations vers google analytics sans passer par un navigateur. Vous pouvez donc depuis un script côté serveur envoyer des informations vers Google analytic pour qu’il enregistre des informations
Pour ce faire nous devons utiliser une API qui s’appelle Measurement Protocol. Le principe est simple, il faut faire une requête de type POST vers le serveur de Google Analytics point

Je vais vous expliquer pourquoi connaître cet aspect de Google Analytics avec important, c’est relatif au tracking des achats sur votre site web. Dans le cas où le paiement s’effectue sur le site de la banque, et que le client revient sur votre site web, l’achat et suivi. Mais dans le cas où le paiement se finit et que la personne ne reviens pas sur votre site web, vous ne pouvez pas suivre les conversions.

Measurement protocol nous permet donc d’envoyer l’information comme quoi là ça a été réussi même si l’internat ne reviens pas sur votre site web après avoir payé sur le site de la carte bancaire

Le principe est simple, vous allez envoyer une requête vers le serveur de Google Analytics avec des paramètres bien défini, les paramètres doivent être au complet, sinon la requête échoue. Mais Google vous fournit à d’outils pour simuler et valider vos requêtes. cet outil c’est le Hitbuilder.

Mais d’abord nous allons voir un exemple très simple pour simuler une première requête vers le serveur de Google Analytics.

 

Il y a énormément de paramètres à envoyer car vous pouvez construire les mêmes requêtes que le script de Google Analytics sur le site web
Il vous faut vous référer à la page de documentation sur les paramètres pour voir la liste complète
Mais sans plus attendre faisant de notre première requête vers le serveur de Google Analytics
Il y a 4 paramètres obligatoire le premier paramètre concerne la version vous pouvez mettre ça n’a pas d’importance, le deuxième paramètre et le paramètre qui concerne le type de requêtes que vous allez vous allez faire , le plus simple c’est la pageview.
Le troisième paramètre est l’identifiant de votre compte Google Analytics et le dernier paramètres concerne le type de campagne pour simplifier nous allons mettre direct.

Voyons d’abord dans le HitBuilder comment nous allons construire à cette requête, dans un premier temps on construit les paramètres, en fait c’est la chaîne de paramètres que vous avez envoyer, ensuite vous allez cliquer sur le bouton Valider pour valider l’intégrité de cette requête et si tout se passe bien vous pouvez envoyer grâce à un bouton vers google Analytics la requête.

Pour visualiser le résultat de cette requête, basculer dans la vue temps réel de Google Analytics, vous aurez un retour immédiatement

measurement protocolConstruire requêtes dans le Hitbuiler et cliquer sur Validate Hit

Cliquer sur le bouton vert pour envoyer la requête

 

Allez ensuite sur votre interface Google Analytics dans le raport temps réel pour voir le résultat.

 

Étant donné que vous avez envoyé vraiment une requête vers votre serveur Google Analytics virgule les données Google Analytics de votre site de production seront affectés. Mais en développement vous pouvez vous permettre d’envoyer quelques données de test sont vraiment pollué les données de votre analytique.

Maintenant que l’on a réussi à envoyer une requête et à la visualiser grâce au graphique trafic temps réel de Google Analytics, on va essayer de faire une requête maintenant avec un script côté serveur. Attention, il y a un paramètre qui ne faut pas omettre et qui est le paramètre dp comme document path, je ne l’ai pas fait la première fois et aucune donnée n’a été envoyée,  ce n’est pas évident car si vous en mettez ce paramètre dans le tuto le HitBuilder, il va dire que la chaîne de requête est valide alors que aucune donnée n’a été envoyée, alors que dans la documentation de référence il est bien dit que dp et dh sont obligatoires dh étant le Host (nom de domaine).

Requêtes dans le Hitbuilder de type transactionnelle

Bien que cet exemple soit très simple, le plus simple possible, il nous faut quand même 6 paramètres pour compléter la requête. Avant d’aller plus loin vers les scripts côté serveur, regardons quand même comment est fait une requête de type e-commerce et transactionnelle puisque c’est le but de cet article c’est-à-dire qu’on voudrait identifier les transactions e-commerce grâce à un script côté serveur.

Je prendrai l’exemple du logiciel de e-commerce PrestaShop. dans le logiciel Prestashop les transactions sont identifiées par le numéro de commande (et non le numéro de panier), par exemple pour une commande dont le numéro de panier est 3012, le numéro de transaction est 3012.

Dans Google Analytics, vous pouvez voir les transaction dans Conversion > Transaction.

Envoi d’une transaction

measurement protocol

Envoi d’une transaction

ti : transaction id

ta : transaction affiliation, ou le nom de la boutique

tr : transaction revenue,

ts : transaction shipping, frais de port

tt : transaction tax

cu : currency

Envoi d’un item

Envoi d’un item de transaction

ti : transaction id, bien sûr si vous voulez que l’on sache dans quelle transaction cet item a été acheté !

in : item name

ip: item price

iq : item quantity

ic : item code (la référence de l’article)

iv : item category

cu : currency

Lorsqu’on envoie vers google analytics un item, il faut spécifier bien sûr le numéro de la transaction à laquelle il est associé vous spécifiez un sous-total, mais attention il faut que lorsque vous envoyez les items du panier, le total des items doit être cohérent avec le montant de la transaction, je vous laisse faire ça à côté serveur, tout ceci pour vous dire que vous pouvez avoir une incohérence entre la transaction le montant de la transaction est le total des items du palier, le système vous le permet.

Measurement Protocol Validation Server

 

Url de validation : https://www.google-analytics.com/debug/collect?tid=fake&v=1 Elle ne diffère de la véritable url que de /debug/ Url d'envoi de requêtes : https://www.google-analytics.com/collect?tid=fake&v=1

Lorsque vous forger une requête et de vous envoyer vers le serveur de Google analytic même si elle échoue n’aurait pas de message d’erreur en retour.
C’est pour cela que Google Analytics vous propose une adresse pour tester vos requêtes.

Attention j’ai noté que même si une requête est bien formatée et qu’elle ne retourne pas d’erreur en mode débogage, ceci ne veut pas dire que vous avez réussi votre requête. J’ai eu le cas où j’ai essayé pour une première fois d’envoyer une requête transaction où je n’ai pas inclu tous les paramètres « optionnels » , la requête n’a rien donné, j’ai vérifié en mode débogage j’ai eu un retour ok mais je n’avais toujours rien dans le rapport de Google Analytics.

Finalement j’ai relu la documentation j’ai pris l’exemple et j’ai réussi ma requête comme quoi il faut toujours se reporter à la documentation et bien la lire.

 

Beaucoup d’exemples de la documentation officielle pour aide mémoire des différentes type de requêtes.

Measurement protocol n’est pas limité au web, les applications Android peuvent utiliser l’API de Measurement Protocol. Les requêtes en  POST ainsi que GET peuvent être utilisées.

J’espère vous avoir aidé dans votre quêtes du tracking intégrale de toutes les transactions, en particulier les transaction de clients pressé (souvent en BtoB) qui ne reviennent même pas vers le site d’origine, tellement ils ont confiance en leur fournisseur.

Il est absolument important de pouvoir tracker toutes les conversion afin de mesurer le retour sur investissement des campagnes de marketing. Sans mesure on ne peut rien améliorer.

 

javascript

Les fonctions flèches en Javascript ES6

Découvrez les fonctions fléchées en Javascript

 

Dans javascript on connaissait jusqu’en ES6 deux façon de déclarer des fonctions, les fonctions nommées et les fonctions anonymes.

Déclaration de fonctions nommées :

function saluer(nom){
    console.log('Bonjour ' + nom)
}

Les fonctions anonymes

function (nom){
    console.log('Bonjour ' + nom)
}

Depuis ES6 vous pouvez déclarer les fonction flèches !

Attention les fonctions flèches ne sont pas équivalentes aux fonction nommées. Une fonction flèche n’a pas de this . Les fonctions flèches sont toujours anonymes. Elles ne peuvent être utilisé comme constructeur.

const add = (a) => return a + 5

add(5) //10

Les fonctions flèches ne sont pas à utiliser en tant que méthode

D’abord c’est quoi la différence entre une fonction et une méthode?

une méthode est une fonction définie en tant que propriété d’un objet, sinon pas de différence au niveau de la syntaxe. Dans le cas des fonctions flèches, il y a une différence de comportement vis à vis de this.

L’exemple ci-dessous  :

var obj = {
i: 10,
b: () => console.log(this.i, this),
c: function() {
    console.log(this.i, this)
    }
}

obj.b(); // undefined Window {...}
obj.c(); // 10  Object{i:10}

Alors qu’une fonction anonyme connait son propre this, une fonction flèche n’a pas son propre this, comme l’atteste l’affichage, le this de la fonction se réfère à l’objet Window.

Les fonctions flèches n’ont pas de constructeur

var Foo = function{}()
var f = new Foo()

var Bar = () => {}
var b = new Bar() //Uncaught TypeError : Foo is not a constructor
node JS

Utiliser le Sass et NodeJS pour accélerer son développement CSS

Aujourd’hui en 2017 si vous développez en HTML/CSS directement dans le dur, je vous prédis que vous allez souffrir.

On ne développe plus ne CSS directement, on passe par le LESS ou le SASS.

Personnellement j’utilise le SASS, c’est un lagage qui va être transformé en CSS grâce à un programme qu’on appelle un compilateur.

Mais voyons tout de suite les avantage d’utiliser le SASS:

Supposons que vous ayez une div à l’intérieur d’une autre.

<div class="outer">
    <div class="inner">
        <a href="//google.fr">Google</a>
    </div>
</div>

Pour styler les div, vous faites en CSS:

.outer {font-size:12px}

.inner{font-size:10px}
.inner a {color : blue}

 

javascript

Commencez à programmer en javascript ES6 (ES2015) doucement

Programmer en ECMASCRIPT 6 alias ES2015

Si vous faites du Web, vous avez sans doute entendu abondamment parler de Ecmascript 6. C’est une norme qui décrit la syntaxe du langage Javascript (pour simplifier)

Voyons les innovations syntaxiques que vous devez absolument connaitre car tous les navigateurs les utilisent aujourd’hui.

Déclaration de variable avec var (méthode historique)

Jusqu’à présent vous ne déclariez les variables qu’avec var.

Or il cause beaucoup de poblèmes : son scope est global à l’objet window.

var prenom = "Yvon"

On dit que son scope (sa portée) est globale. Si vous venez du monde du php, vous avez dû voir qu’on peut déclarer une variable comme globale avec le mot clé global.

Pour des raisons de bonne pratique de sécurité, il faut éviter de déclarer des variables globales.

Revenons au Javascript, var déclare une variable de porté globale, c’est à dire qu’elle peut être utilisée partout.

Jusqu’à récemment avant ES6, nous ne pouvions déclarer de variable de porté de type bloc. Un bloc est tout ce qui est compris dans une parie d’accolade.

Une variable de type bloc, de portée bloc, n’existe que dans la paire d’accolade, en dehors on ne la connait pas.

Historiquement var a été introduit pou faciliter la programmation, afin que les programmeurs novices puissent utiliser rapidement Javascript. Mais au fil du temps cela s’est avéré être un mauvais choix. Aujourd’hui (seulement) les concepteur du langage on décidé d’introduire deux nouvelles façons de déclarer une variable. Ces deux nouvelles façons const et let déclarent des variables de porté de bloc.

Déclaration de variable avec const

A la différence de PHP par exemple, const ne déclare pas une constante ! La signification de const est que le binding est constant, invariable, vous ne pouvez pas réassigner la variable à un pointeur différent, mais vous pouvez modifier sa valeur. En Javascript, la notion de constante existe dans le cadre de la programmation fonctionnelle via des librairie comme immutable.js .

cont prenom = "Yvon"

Pour vous montrer que const a sa valeur qui peut changer :

const prenom = 'Yvon' prenom = 'Julien' console.log(prenom) // Erreur Uncaught TypeError: Assignment to constant variable. 

Le code ci-dessus montre que la valeur de la primitive n’est pas modifiable. Par contre, si on déclare un objet litéral :

const eleve = { prenom :'Yvon', nom : 'Huynh'} eleve.prenom = 'Julien' console.log(eleve.prenom) // Julien

 

On peut modifier une propriété d’un objet litéral. eleve est bindée par référence à cet objet. Mais si on essai de réaffecter par référence :

const eleve = { prenom : 'yvon', nom : 'huynh' } eleve = { prenom : 'toto' } console.log(eleve.prenom) // Uncaught TypeError: Assignment to constant variable.

Une autre particularité de const est que vous devez initialiser dè sla déclaration de la variable, sinon vous avez une erreur.

const pays; //Uncaught SyntaxError: Missing initializer in const declaration

Block scope avec const

Enfin regardons l’aspect le plus important concernant const, il est block scoped, c’est à dire qu’en dehors (à l’extérieur) des accolades où la variable a été définie, elle n’existe pas.

function saluer(ami){ const pays = 'France' if(pays === 'France'){ const greet = ' Monsieur' console.log('Bienvenue en ' + pays + greet) } console.log('A une autre fois en ' + pays) console.log('Au revoir ' + greet) } saluer('Yvon') // imprime Bienvenue en France Monsieur,A une autre fois en France, mais affiche Uncaught ReferenceError: greet is not defined

Alors que pays reste en valable, greet n’est plus connue en dehors des accolades où greet a été définie.

Un exemple encore plus flagrant on va créer deux variables portant le même nom,mais avec des valeurs différentes :

const ville = 'Paris' function saluer(nom){ const ville = 'Nantes' console.log('bienvenue à ' + ville) } saluer('Yvon') //bienvenue à Nantes console.log('Euh non on est à ' + ville) //Euh non on est à Paris

Nantes ne peut exister en dehors des accolades de la fonction.

 

Peut on rendre une variable const vraiment immuable?

Même si dans votre vie vous aurez probablement peu l’opportunitéde rendre un objet immuable, il existe une façon de rendre immuable une variable déclarée avec const.

const eleve = Object.freeze( {prenom : 'yvon', adresse : { rue : ' De gaulle', ville : 'Nantes', codepostal : 44000} }) eleve.prenom ='Julien' console.log(eleve.prenom) // yvon

Vous remarquez que la propriété prenom est inchangée. Si vous utilisez « use strict »; vous aurez une erreur Uncaught TypeError: Cannot assign to read only property ‘prenom’ of object ‘#‘.

Object.freeze est ‘shallow’ comme on dit en anglais, cela veut dire que vous pouvez quand même altérer les propriétés des objets imbriquée.

"use strict"; const eleve = Object.freeze( {prenom : 'yvon', adresse : { rue : ' De gaulle', ville : 'Nantes', codepostal : 44000} }) eleve.adresse.codepostal = 44100 console.log(eleve.adresse.codepostal) // 44100

Le code ci-dessus est tout à fait valide.

A quoi ça sert const en Javascript?

On dit que les variables déclarées avec const sont « block scoped ». Un bloc c’est ce qui est entre accolade dans la définition d’une fonction. C’est pour pallier au défaut de var (qui est défini dans les accolades d’une fonction, on dit que var est function scoped), qu’on a introduit const afin de mieux structurer son code et d’éviter des collisions.

 

Qu’est ce que la Temporal Dead Zone?

Lorsqu’un code javascrip est exécuté, une variable ne peut être settée ou gettée tant que l’exécution n’a pas atteint la ligne de code où la variable a été définie.

function saluer(name){ // début de la fonction if(name === 'yvon'){ //début du block var ville = 'Paris' console.log('Pays = ' + pays + ' Ville destination = ' + ville) var pays = 'France' } } saluer('yvon') // Pays = undefined Ville destination = Paris

On voit que la variable pays étant définie après le console.log, il est à undefined. Par contre que se passe-t-il si on a const à la place de var ?

function saluer(name){ // début de la fonction if(name === 'yvon'){ //début du block var ville = 'Paris' console.log('Pays = ' + pays + ' Ville destination = ' + ville) const pays = 'France' } } saluer('yvon') //Uncaught ReferenceError: pays is not defined

Vous avez une erreur (un avertissement) comme quoi votre variable n’est pas définie. Au moment ou le console.log s’exécute, pays n’est pas encore définie, elle n’a pas de valeur attribuée. L’utilité de la Temporal Dead Zone (TDZ) est de vous permettre de coder plus proprement, en lançant des avertissements.

mysql

Résoudre les crash mysql

J’ai récemment eu quelques souci sur une base mysql sous Linux, le disque étant plein, il y a eu quelques tables qui ont crashé.

Le résultat est un site web qui ne marche pas.

Premier réflexe : essayer de redémarrer Mysql

Seconde chose à faire quelquesoit le résultat de la première étape : regarder les logs mysql ! En génral c’est sauvé dans /var/log/

 

J’ai eu donc deux tables qui ont crashé avec le message suivant dans les logs :

Mysql : is marked as crashed and should be repaired

170127  8:58:26 [ERROR] /usr/libexec/mysqld: Table ‘./mydatabase/user_sessions’ is marked as crashed and should be repaired

Pourquoi? plus loin en arrière, j’ai le message très parlant :

170126 21:10:08 [Warning] Retry in 60 secs. Message reprinted in 600 secs
170126 21:20:08 [Warning] Disk is full writing ‘./mydatabase/archives_factures.MYD’ (Errcode: 28). Waiting for someone to free space… (Expect up to 60 secs delay for server to continue after freeing disk space)

 

C’est bien un problème d’espace disque qui est à l’origine de la panne !

Pour s’en convaincre, on peut utiliser les comande Linux df et du pour diagnostiquer l’espace restant.

 

Réparer les tables Mysql crashées

Vous pouvez le faire en ligne de commande ou sous phpmyadmin, mais je vous conseille de le faire en ligne de commande dans le shell, parce que c’est plus performant et plus sûr.

Une fois connecté sous Mysql, la commande à faire est :

$ repair table table_defectueuse

Voilà c’est à peu près ce qu’i faut faire.

Mais il arrive que certaines tables soient plus endommagée que çà, et que la commande ci-dessus ne suffisent pas, on a le message :

Can’t find file: ‘table_defectueuse’ (errno: 2)

Pour connaitre la signification de l’erreur, faire la commande shell suivante :

$ perror 2

$ OS error code   2:  No such file or directory

 

 

 

 

Magento : Surcharger les modèles, classes, Helper, controller et block

Lorsque que vous avez des modifications à faire sur un logiciel open source, la dernière chose à faire est de modifier le code source, car vos modifications vont être balayées à la prochaine mise à jour.

Donc dans Magento, l’approche consiste à étendre le code d’origine, on dit étendre le Core.

Si vous voulez modifier le design en frontal, vous allez surcharger les blocks, qui sont à la base de la disposition visuelle.

Si vous voulez jouter ou modifier un comportement de base d’une méthode, vous allez surcharger le controleur.

Si vous voulez ajouter des champs supplémentaires à une entité, vous allez surcharger le modèle.

Si vous voulez ajouter une fonction helper  ou modifier une fonction helper, vous allez surcharger un Helper.

 

Surcharger un modèle dans Magento

1/Créer un module avec une arborescence type

2/Déclarer votre module dans le fichier xml à placer dans le répertoire app/etc/

3/créer un fichier de configuration xml config.xml qui viendra se greffer au fichier principal de Magento

4/déclarer la classe à surcharger dans le fichier config.xml et le placer dans /etc du répertoire de votre module. Dans ce fichier vous allez entrer dans le noeud xml votre nouvelle classe, cette dernière étend la classe dont vous allez surcharger les fonctionnalités.

 

 

Surcharger un controller dans Magento

1/Pour overrider un controller, on n’utilise pas la balise norewrite

2/il y a un hook before et un after qui permet d’exécuter

 

Surcharger un Helper dans Magento

 

 

Surcharger un block dans Magento

 

 

 

docker

Introduction à Docker

Si vous êtes développeur et que vous n’avez pas encore entendu parler de Docker, vous devez vivre dans une caverne.

Docker est un système de conteneur léger d’application à la différence des machines virtuelles.

Ce qui veut dire que sur votre ordinateur, il n’y a qu’un seul OS, mais plusieurs containers Docker.

Mais trève de bavardage, nous allons voir comment installer Docker et mettre en place des containers Docker. La promesse étant de vous épargner d’installer une base, un logiciel, et toutes les dépendances, avec ceci tout est contenu dans un Docker, et quand vous l’installez, tout est mis à disposition.

 

Docker est disponible sur Windows, Mac mais c’est surtout sur Linux que vous aurez la meilleure expérience, en effet Docker se base sur un concept né du monde Unix (LXC).

Les différents composants de Docker:

Docker Engine

C’est le coeur de Docker, avec lui vous faites marcher une image (une représentation statique d’un conteneur), l’image en marche est en fait le conteneur. C’est un instantané d’un conteneur. C’est aussi dans cet état d’image que le conteneur va transiter entre le dépôt Docker et votre poste.

 

Docker Compose

C’est un peu la killer feature de Docker, c’est un programme qui vous permet de lier plusieurs container, par exemple vous avez un conteneur Apche, un conteneur MySQL, un conteneur PHP, Docker Compose vous permet à la manière d’un jeu de Lego de mettre en relation tout ce beau monde et de faire fonctionner comme si vous aviez installé chaque programme sur votre ordinateur.

 

La première chose est d’installer Docker !

Sur Linux, on va choisir une distro Debian, attention, les développeurs de Docker n’ont pas d’état d’âme et n’hésitent pas à casser une compatibilité avec une ancienne version pour faire marcher leur fonctionnalités dernier cri. De fait, vous aurez besoin d’un version 64 bits et assez récente de Debian, selon leur site, Debian 8 Jessie est recommandé, sinon avec la 7 il vous faudra faire une manipulation assez compliquée qui permet d’installer les dernière modification et ainsi « émuler une version Debian plus récente »

 

Préparation  de l’installation de Docker

  1. Permettre à Docker de commmuniquer via SSL
  2. Installer une clé de chiffrement GPG (alternative à OpenSSL)
  3. Mettre à jour le fichier des dépôts Debian /etc/sources.list

 

 Installation proprement dite de Docker Engine:

 

$ sudo apt-get update

$ sudo apt-get -y install docker-engine

 

Faire marcher pour la première fois Docker Engine avec un Hello World

Apprendre a utiliser VIM Réglage

Par défaut Vim va créer un fichier d’undo et de backup, pour ne pas avoir ces deux fichiers ‘ finissant par ~ et un.~ : caractère tilde) qui risquent de polluer votre répertoire, il vous faut éditer la fichier de configuration _vimrc situé dans le répertoire d’installation de Vim. Pour Windows allez à Programme Files.

Vim configuration de base

Mettez y ces quelques lignes et sauvez, c’est fait !

set nobackup
set nowritebackup
set noundofile

VIM afficher les numéro de lignes:

En mode navigation, tapez « : » puis set number ou set nu

Pour enlever les numéros de ligne :

set nonumber ou set nonu

Pour avoir les numéros de ligne systématiquement, il faut éditer le fichier .vimrc

Ajoutez la ligne set number

VIM éditer deux fichiers dans une même fenêtre de terminal

vi -o fichier1 fichier2

Magento api: Invalid webservice adapter specified

Que faire quand vous avez ce message lorsque vous désirez tester une API SOAP Magento

en local?

Lorsque vous tentez d’accéder à cette url dans votre navigateur :

http://www.magentostore.fr/api/v2_soap/?wsdl=1

Sachez que si vous recevez ce message « Magento api: Invalid webservice adapter specified » , vous pouvez accéder normalement à votre site en local, au moins, mais que pour une raison ou une autre le serveur ne peut retourner la ressource demandée.

La réponse est à trouver dans la configuration Apache, on rentre dans le concept de négociation de contenu.

Il faut trouver la ligne :

Options Indexes FollowSymLinks MultiViews

 

et la remplacer par ceci :

Options Indexes FollowSymLinks -MultiViews

 

Appliquer cette modification dans le fichier httpd.conf d’Apache n’a pas produit les effets escomptés, mais le faire dans le fichier htaccess de Magento est couronné de succès. En plus cela vous évite de redémarrer les services de WAMP si vous êtes sous Windows.

En réalité sur Magento 1.9,la ligne à modifier est exactement :

Options -MultiViews

Entendez bien ajouter un signe moins devant MultiViews.

C’est quoi la négociation de contenu?

Selon Wikipédia :

« La Négociation de contenu est un mécanisme défini dans la spécification HTTP qui offre la possibilité de proposer pour une même URI, différentes versions d’un même document (ou plus généralement, une ressource). Les User-Agent peuvent ainsi choisir la version la mieux adaptée à leurs capacités. Une des utilisations classiques de ce mécanisme est de proposer une image aussi bien au format GIF que PNG. Ainsi un User-Agent qui ne peut pas afficher le format PNG peut toujours utiliser la version en GIF. »

Donc vous entendez parler de négociation de contenu que dans le domaine de HTTP puisqu’elle en est une spécification.

Mais il est probable que vous en entendrez parler peu même en tant que développeur web.

javascript

Comprendre l’objet Window dans javascript

Quelle est la différence entre Window, Document, Screen?

Window est l’objet principal du DOM, le document object model, qui est la base de la page web et quand je dis la base ça comprend vraiment tout, les images, les scripts javascript, et autres objets, bref ce que vous voyez dans la fenêtre de votre navigateur.

Quand vous faite un script javascript, vous ne le savez peut être pas, mais vous utiliser une méthode ou un objet de l’objet Window, qui est le parent de tous les objets javascripts.

 

Document est un sous objet de Window. Document est en fait la vraie partie visible de la page qui est dans votre navigateur.

Pour savoir ce que l’objet Window contient, je vous invite à faire tourner le script suivant dans la console javascript (pour Chrome, faire F12,cliquer sur console) :

console.log(window);

 

cette ligne de javascript va afficher l’objet Widow dans la console de debug. Déplier le et vous allez être submergé, car il contient beaucoup d’objet, et vous allez vous rendre compte qu’il est facile de faire une radiographie de la page web et très facilement.

Ne sous estimez pas la puissance d’un simple console.log, il vous permet d’afficher n’importe quel objet, même les lus obscure. Par exemple, quend vous chargez un script Jquery, il est rattaché au DOM donc à window. Vous pourrez afficher tout l’objet Jquery et regarder ce qu’il contient ! De même si vous ne savez pas ce qu’il y a dans l’objet Angular, vous pouvez l’afficher de cette façon. Attention, c’est gros et vous allez peut etre vous y perdre.

 

Cas des iframes

Lorsqu’il y a des iframes dans votre page html, le code JS qu’il y a dans le ifrmae ne peut pas accéder directement à la fenêtre qui le contient. Si vous êtes dans l’iframe, pour accéder à un élément du DOM de la fenêtre parente, vous devez faire :

var topWindow = window.top

votre variable topWindow contiendra une référence vers l’objet window le pus haut dans la hiérachie des windows, oui il peut avoir plusieurs windows dans une page web.

Le parent immédiat :

Si vous êtes dans une iframe et que vous voulez le parent immédiat :

var parentWindow = window.parent

 

 

 

 

javascript

les bases de La bibliothèque moment.js

Pour manipuler les dates en Javascript, ce n’est pas forcément simple, en outre nativement Javascript possède peu de fonction de manipulation de date, d’ou l’intérêt de Moment.js.

Le problème c’est que moment.js sait faire tellement de chose et que la documentation est tellement touffue (voire pas bien foutue) que l’on peine même pour faire les opérations les plus élémentaires.

Ce post se veut comme un aide mémoire pour faire les opérations les plus simples avec les dates.

 

Instanciation d’une date

const t = moment()

génère un objet correspondant à la date et heure actuelle

const t = moment("12-05-1996","MM-DD-YYYY")

 

génère une date mais avec un format passé en second argument, pour être sûr de bien comprendre la date passée en premier argument.

calculer la différence entre deux dates

Pour calculer la différence entre deux objets moment, il faut utiliser la méthode diff (moment.diff() )

const start = moment('2016-11-13','YYYY-MM-DD')

const end = moment('2016-11-11','YYYY-MM-DD')

 

 

 

Calculer la différence en heures

const c = start.diff(end,’hours’)

 

Calculer la durée dans moment

 

MomentJS est plus dédié à la notation de temps à un point donné, mais il est possible de

duration = moment.duration(start.diff(end),’milliseconds’)

javascript

Utiliser NPM Script au lieu de Gulp pour builder

On entends sur le net beaucoup à propos de Grunt ou de Gulp, ces outils vous permettent de compiler du sass en css, de minifier les script css et javascript, de rassembler en un seul fichier etc.

Cependant, il vous est tout à fait possible de faire ce que fait Gulp par exemple rien qu’en utilisant ce qui est disponible avec NPM script.

NPM est le gestionnaire de package sous nodeJS. Il vous permet de télécharger les dépendances nécessaire au fonctionnement de votre application web et du développement de ce dernier.

Voyons voir comment on peut compiler du Sass en CSS en utilisant NPM script.

les scripts NPM sont logés dans le fichier package.json, dans la propriété scripts.

C’est un objet json qui contient des paire clé-valeurs. La clé étant le nom d’un script, et la valeur est la commande NPM que vous auriez tapé en ligne de commande.

Bon assez parlé on y va !

Compiler du Sass en css

c’est la tâche que l’on aura le plus souvent à faire.

Donc je suppose que vous avez déjà installé nodeJS, donc que vous pouvez utiliser NPM.

> npm install node-sass

Ensuite dans l’objet scripts qu’il y a dans le fichier package.json, créez une entrée comme ceici:

"scripts": {
"scss-build": "node-sass --include-path src/scss src/scss/style.scss public/css/style.css",
"watch-scss": "node-sass -w src/scss/ -o public/css/"
},

 

les chemins sont relatifs à l’emplacement du fichier package.json

le premier script « scss-build » va dire à node de compiler le fichier style.scss en style.scss

  1. src/scss est le répertoire source
  2. src/scss/style.scss est le fichier sass à compiler
  3. public/css/style.css est le fhicer cible

Rien qu’avec ce premier script (n’ajoutez pas le second script watch-scss pour l’instant), faite ceci:

> npm run scss-build

 

et voilà !

Passons au second script, comme avez à modifier un grand nombre de fois le fichier sass, vous aurez envie que la compilation se fasse à chaque fois que vous sauvez le fichier sass,

le « watch-scss » va surveiller toute modification du ficheir et va le compiler.

Il suffit donc de lancer non pas le premier script, mais le second script seul.

> npm run watch-scss

 

 

et voilà !

Il y a plus dans les npm scripts que la compilation. On aura envie de minifier le css,minifier le javascript, linter le javascript (linter veut dire vérifier que le code soit aux normes),autopréfixer les propriétés css, et même compresser les images (ce qui est très intéressant !). Le top du top est de pouvoir travailler avec Browsersync quand vous développez en cross browser.

 

 

Retour en haut