samedi, 20 février 2021 09:54

Transformer une image en ... CSS !

Écrit par

Partant du principe que nous avons à peu prés tous désormais un navigateur dit moderne, et notamment dans mon cadre professionnel pour lequel je suis intervenu, j'ai voulu fabriquer grâce à CSS 3 une forme de ticket de boucherie, forme sur laquelle je voulais afficher simplement et la clef primaire d'un enregistrement. Tous les informaticiens comprendrond, pour les autre, je voulais juste afficher la référence unique de l'enregistrement de la base de donnée, pour le retrouver facilement.

Bien que j'ai compris comment fonctionnait, en CSS, la manière de dessiner une forme, il faut bien avouer que le manque de temps (et d'envie) m'empêche de coder le CSS adéquat, pour afficher cette forme relativement complexe.


Source : Pinterest

 
Après quelques recherches sur Internet, je suis tombé sur ce site que je voulais vous faire partager à travers cet article : img2css, hébergé sur le domaine http://javier.xyz.
Le principe est relativement simple. Il repose sur un drag and drop d'une image que vous souhaitez convertir en CSS. Pour ma part, je suis partie d'une image au format JPEG. Je reconnais n'avoir pas testé les autres formats des images.
Comme la forme que je souhaite obtenir en CSS et un ticket de boucherie, cous conviendrez que cette forme peut être qualifiée de complexe (il ne s'agit pas là d'un carré, un rectangle, mais bien un polygone, avec des formes arrondies).
Une petite recherche sur un site d'images libres m'a permis de trouver une image représentant un ticket de boucherie, sur un fond blanc. La couleur du fond a l'air importante, car pour pouvoir sortir la forme du fond, il faut une "zone de rupture", deux couleurs bien distinctes.
Une fois votre drag and drop effectué sur basket zone à l'aide de votre souris, de manière quasiment transparente et instantanée, vous verrez s'afficher à l'écran l'ensemble du code CSS correspondant à l'image que vous souhaitez transformer, aindi que le <div> "portant" le CSS.
Tout ce code est un code HTML, cela signifie que d'une manière technique, votre code généré et tout simplement une division HTML (un <div>), qui va prendre en paramètre une/des propriété de style. C'est dans ce style que la forme va prendre forme.
Un simple copier-coller du code généré dans une page HTML, bien entendu dans le body, va afficher "l'image", ou plutot la <div> et son style que vous avez demandé à transformer en CSS.
Alors, me direz-vous, cette forme et son contenu sont super simple, et je suis d'accord avec vous. C'est la raison pour laquelle j'ai récupéré l'icône représentant le spectacle "Le Lac des cygnes" programmé prochainement dans notre commune. Vous pouvez imaginer la complexité de l'images entre les cygnes, les danseurs, le titre et surtout le dégradé du fond de l'affiche. 
Je n'ai pas été déçu du résultat.
Afin de conclure cet article avec quelques présentation CSS issu d'images, je joins quelques transformations que j'ai réalisé avec cet outil.
 
 Image CSS généré
 lac des cygnes
 
 
lundi, 08 février 2021 21:11

Premier petit module Joomla

Écrit par

Il y a maintenant 15 jours, je me suis attaqué ou développement d'un petit module pour le CMS Joomla, module sans paramètre, permettant d'afficher sous la forme hierarchisée, l'intégralité des tags enregistrés dans votre Joomla. Je m'intéresse uniquement des tags associés à des articles de JoomlaContent. (je ne parlerai pas donc des tags K2, JEvent ou autre composants)

Avec une formation de programmeur plutôt procédural, je dois avouer que les concepts objet ne sont pas du tout mon fort, et j'ai dû faire face à pas mal d'interrogation, grâce notamment au groupe Lorraine, dont les développeurs m'ont aidé à comprendre des concepts, qui m'ont permis d'arriver au résultat que je vais vous présenter.
Petite note à tout les puristes qui vont lire cet article : je vous rappelle que je ne connais absolument pas grand-chose en programmation objet, je ne connais que quelques concepts. En revanche je suis ouvert à tout commentaire.
Dans cet article que je vais donc vous présenter cet affichage sous la forme d'un arbre simple, c'est-à-dire des listes à puce intégrées les unes aux autres.
Le gros point faible je trouve dans la programmation objet, c'est que nous avons besoin d'une multitude de fichiers différents pour se conformer au développement en couches. Même si je comprends le concept, même si je comprends la façon de faire, même si je suis entièrement d'accord avec toute la théorie, je trouve particulièrement pénible et fatiguant de jongler entre les différentes les différentes couches !
Pour les débutants comme moi qui ne comprennent pas de quoi je parle dans les couches, il s'agit de différencier la partie données, la partie interface graphique, et de fabriquer une troisième partie on pourrait symboliser comme ciment de l'ensemble des fonctions. C'est troisième partie qui permet de relier les différentes couches entre elles.
Dans notre cas, les couches vont être des fichiers différents, chacun d'entre eux ayant sa propre fonctionnalité technique, dont voici la présentation.

Un fichier XML

À partir de fichier existant, j'ai fabriqué ce fichier XML dans lequel nous retrouvons de grandes familles d'informations, des métadonnées comme le nom des modules, son auteur, sa version, une description. Parallèlement à ces métadonnées, nous allons rester dans une deuxième partie, l'ensemble des fichiers composants le module que nous sommes en train d'écrire. 
 
Description du module grâce à un fichier XML
 
Comme vous pouvez le voir sur la copie d'écran, dans la balise files, nous allons chaque fichier mis les uns en dessous des autres. L'ensemble de ces fichiers formant le module, on va se référer à ce fichier XML pour savoir de quoi il en retourne.
Sur cet exemple précis, nous voyons un premier fichier XML, c'est-à-dire ce fichier présentement de description compose d'une description, c'est-à-dire à la fois la partie graphique, la partie programme, ainsi qu'une template simple de mon module.
Je vous passe la description de chacune des balises utilisé dans mon fichier XML, vous comprendrez facilement ce que veut dire même, auteur, version, description ainsi que file si vous êtes un tant soit peu anglophones.
 

Capture décran 2021 02 08 à 21.18.53

Le fichier Helper

Grâce à un groupe joomia lorraine sur Facebook, j'ai compris la définition du terme Helper. Suite à ma question "c'est quoi un fichier Helper", un développeur joomla m'a répondu que c'était une classe générique permettant de répertorier des fonctions utiles partout et qui ne sont pas liées à des vues ou actions."
Du coup, le développeur souligne le fait mais cela tombe sous le sens, c'est une classe statique pouvant être appelée de n'importe où. On peut donc voir un fichiers helper comme une trousse à outils, dans laquelle nous allons piocher les outils dont nous avons besoin au moment où ce besoin se présente. Pour celles et ceux qui comme moi ne maîtrisent pas entièrement encore la programmation objet, le développeur souligne qu'un fichier helper n'a pas besoin de sa classe pour être instanciée puisqu'elle est statique.
Dans l'exemple que je vous propose, je crée une méthode qui s'appelle getHello() - je dois vous avouer que j'ai travaillé à partir d'autres fichiers qui comportent ce nom, le nom de cette méthode n'est donc pas logique -, méthode qui dans notre cas va récupérer des informations issues de ma base de données afin de les afficher.
Comme nous sommes en programmation objet avec différentes couches bien séparées, ces informations, une fois récupérées, je ne devrais pas les afficher directement, mais les balancer dans une vue. (je ne l'ai pas fait ici)
Je vais donc dans un premier temps, récupérer ces informations. Cette action s'effectue par l'ensemble de ma classe GetHello(). Une fois ces informations récupérées dans un curseur, c'est-à-dire un espace mémoire où je récupère toutes les informations issues de ma base de données, je vais les afficher.
Je parcours donc mon curseur de résultats, et pour chacun d'entre eux, je vais rechercher la propriété level , propriété affichant le niveau du tags. Je compare si ce niveau est supérieur ou inférieur au niveau lu précédemment dans ma boucle. Dans la mesure où j'affiche mes tags dans des listes à puce imbriquées, je dois pouvoir détecter si mon élément courant je suis en train de lire est au même niveau que le précédent, s'il est enfant du précédent, ou bien s'il est parent du précédent, afin de pouvoir organiser les <ul> et <li>.
Pour pouvoir faire le faire, étant donné que nous sommes dans une boucle, j'utilise une variable tampon qui stocke le niveau de l'élément précédent, cette valeur et en stocker dans la base de données, afin de pouvoir dans cette même boucle, comparer si l'élément courant est fis où ancêtre de l'élément lu précédemment.
En fonction du cas, je crée une liste à puce enfant où je reviens au niveau parents dans ma liste, symbolisé dans mon code par l'affichage de <il> ou</ul>.
Désormais que j'ai la liste des tags lus depuis ma base de données, je dois, pour chacun d'entre eux, lui affecter un lien permettant, lorsque l'utilisateur cliquer dessus, au programme joomia de relier les enregistrement taggés avec ce tag. J'ai codé ici l'adresse url en récupérant l'adresse courante à partir des variables d'environnement serveur que PHP nous donne. Je me suis inspirée des url fourni dans Joomla à partir d'un tag.
 <?php
public static function getHello($params) {
// Obtain a database connection

$db = JFactory::getDbo(); // Retrievetheshout
$query = $db
  ->getQuery(true) //retourne un nouvel objet avec TRUE
  ->
select($db->quoteName('title')) //Nomdu champs ds laBDD
  ->from($db->quoteName('joomla_tags')) //nom de la table
  ->order('path ASC');

$db- >setQuery( $query);
$column = $db- >loadColumn();
$t = $db->loadRowList();
echo '<div class="hashtags" >' ;
echo '<div style="background-color: yellow;color:red;border:2px solid blue;">Plan des hashtags</div>';
$result = $db->loadObjectList();
echo "<ul>";
$sav_niveau=0;
for ($i=0;$i<count($result) ; $i ++) {
  if ($result[$i]->level < $sav_niveau){
 echo "</ul>"; 
}
  if ($result[$i]->level > $sav_niveau){
        echo "<ul>";
  }
   // "calcul de l'URL du lien à mettre
     $URL = strpos(strtolower($_SERVER['SERVER_PROTOCOL']),'https') === FALSE?'http' : 'https';
   $URL .= "://". $_SERVER['HTTP_HOST'];
   $URL . = $_SERVER['SCRIPT_NAME'] ;
   $URL . = $_SERVER['QUERY_STRING'] ;
   $URL .= "/component/tags/tag/";
   echo '<li><a href="'.$URL.$result[$i]->alias.'">'. $result[$i]->title.' ('.$result[$i]->level.')</a></li>';
   $sav_niveau=$result[$i]->level ;

   $sav_niveau=$result[$i]->level ;
   }
   echo "</ul>";
   echo "</div>";
}
}
?>

Le fichier tmpl/default.modTree.php

Afficher permet le point d'entrée du mobile. Je ne vous cacherai pas que c'est un simple copier-coller adapté avec, que je n'ai pas touché. À priorie, ce fichier permet de définir une variable à jumia, intégrer le fichier Helper.php, et de définir cake paramètres ainsi que afficher le layout.
<?php 
// Nodirect access 
defined('_JEXEC') or die;// Include the syndicate functions only once 
require_once dirname(__FILE__) . '/helper.php';
$hello = modHelloWorldHelper::getHello($params);
require JModuleHelper::getLayoutPath('mod_treeTags'); 
?>

Le fichier modèle

Dans mon répertoire de modèle, qui s'appelle TMPL, nous allons créer le fichier par défaut intitulé default.php.
Un fichier défini _JEXEC, correspondant à un point d'entrée sécurisée dans le code de joomia. 
<?php 
// Nodirect access 
defined('_JEXEC') or die;// Include the syndicate functions only once 
require_once dirname(__FILE__) . '/helper.php';
$hello = modHelloWorldHelper::getHello($params);
require JModuleHelper::getLayoutPath('mod_treeTags'); 
samedi, 16 janvier 2021 14:25

Initiation au développement d'un module Joomla !

Écrit par

Sur la vidéo, un bug est survenue : le dossier dont je parle ne s'affiche pas. Téléchargez mon archive avant de visualiser la video pour suivre

zip

 

samedi, 21 novembre 2020 09:20

Word, Excel... des dézippeurs surpuissants !

Écrit par

Un docx, c'est quoi ?

Aujourd'hui, j'ai tenté de ressortir des méta données, avec PHP, des fichiers Office, tous aux formal XML. Pour ceux qui l'ignorent, tous les fichiers de la suite Office se terminant par un X sont un "nouveau" format (plutôt le dernier format, car il n'a pas loin de 10 ans !) de la suite Office. En formation, j'avais entendu dire que ce fichier n'était ni plus ni moins qu'un fichier XML à la "sauce" Microsoft. Oui,... enfin presque !

Cet article relate la manière de faire pour aboutir à mes fins. Nous verrons pourquoi je n'ai pas pu le faire. L'idée, tout comme l'article de la semaine dernière, etait bien d'extraire des méta-données de ces fichiers, pour les afficher sur la page du fichier de ma GED, GED propulsée par Joomla.

Dans un premier temps, je me suis posé la question "un docx, c'est quoi ?" et je n'ai pas mis lontemps à comprendre : un docx, c'est ni plus ni moins qu'un ensemble de fichiers, compressé au format... zip.

-"A ouais, alors je peux l'ouvrir avec un dézippeur ?"
-"Bah wai !"

dezippeur

On a déja fait un grand pas. Mais maintenant, y'a quoi dans cette archive et surtout y'a-t-il des méta données ?

Et les méta-données ?

Je ne vais pas vous cacher que comme ce n'est que cette partie là qui m'interessait, je ne suis pas allé voir le reste du zip, du docx. Et c'est plutôt pas trop mal fait (je ne vais pas encenser non plus un format propriétaire !)

Vous voyez le dossier docsProp ?

  • Non achetez des lunettes.
  • Oui, ouvrez le !

Vous avez à l'intérieur deux fichiers dans un format "standard", si l'on en croit l'extension de fichier : XML ! Ouvrons le dans un (vrai) navigateur (qui lui sait afficher correctement un XML)

arbreXML

 

Interessant tout ca, surtout qu'un XML, ca se parse facilement ! Et les méta données, du coup je peux les récupérer....

Oui... mais non !

Jusque là, content de ma découverte, je me suis dis, y'a pu qu'a parser. Et quand on tient un blog sur lees API du web, parser un fichier XML, ca reste dans mes cordes. Sauf que...

Sauf que, on l'a vu en début d'article, un .docx est un fichier ZIP. Et pour dézipper un .zip en PHP, il faut des bibliothèques compatibles php 7.2. Or je ne travaille pas (en local, je précise !) sur cette version de PHP, je n'ai jamais fait la mise à jour et reste sur un version 2. Aller je blague mais je suis sur un PHP 5.2, du coup, je n'ai pas accès à la bibliothèque ZipArchive, une biliothèque PHP de travaux sur des ZIP) pour aller, par programmation, dézipper mon fichier docx (ca fait drôle d'écrire cà !) . Ce qui explique que ca ne fonctionne pas. Il faudrait que j'essaie de faire une mise à jour du paquet PHP de ma distrib pour aller + loin dans mon travail.

Mais pas plus. Mais si je trouve une bibliothèque php5 pour faire ca...

Aujourd'hui je vais vous présenter un besoin que j'ai eu dans un cadre professionnel. Je dois récupérer des métadonnées de fichiers, tous au format PDF, afin de les afficher sur la page web sur laquelle ce propre fichier PDF est téléchargeable. Voyons comment je me suis pris pour réaliser cette prouesse.

Dans un premier temps, j'ai créé un fichier PDF avec un outil de type générateur de PDF. La suite LibreOffice permet notamment de le faire, mais d'autres outils  professionnels comme Adobe PDF  (!) permettent aussi de le faire.
Partons du principe que vous possédez un fichier PDF dont l'intégralité des métadonnées sont remplies.
La première question que je me suis posée et très simple : peut-on rajouter ses propres champs personnalisés dans les métadonnées d'un PDF ?
Pour l'instant, la seule réponse que j'ai trouvée est malheureusement négative. Cependant, j'avoue n'avoir pas trop chercher car mon objectif peut-être largement atteint avec l'ensemble des champs étant déjà à ma disposition dans le format PDF par défaut.

PDF propriete

 
Pour récupérer l'intégralité des métadonnées d'un fichier PDF, j'ai dans un premier temps, ouvert un fichier PDF dont je savais qu'il contenait des métadonnées. J'ai ouvert ce fichier avec un lecteur PDF classique pour vérifier que ces metadatas était bien présents, puis j'ai réouvert ce même fichier dans un simple éditeur de texte.
PDF sous kate
 
Ainsi, voilà comment je m'y suis pris, dans mon code, pour en extraire les métadonnées : j'ai chargé l'intégralité du fichier PDF, grâce à la fonction file en PHP, qui permet de stocker dans une variable globale, au format texte bien entendu.
Dans un deuxième temps, je parcours l'ensemble du fichier stocké dans mon tableau, (car la fonction file stocke le résultat de la lecture du fichier dans un tableau ! ) afin de détecter une chaîne de caractères "xmpmeta". Vous n'aurez donc désormais compris, le format PDF intègre des données au format XMP. Sans vouloir faire un cours exhaustif sur ce type de format, vous retrouverez une documentation sur Wikipédia, ce format intègre ou format XML, des métadonnées propres au fichier PDF. Le format été créé par Adobe en 2001 et intégré à partir de la version 5 d'Acrobat. Or, comme ce format est basé sur XML, forcément en ouvrant un fichier PDF, les données apparaissent "en clair" afin, notamment, de pouvoir être exportées.
Ainsi, en revenant à mon code, je parcour l'ensemble du tableau chargé à partir du texte brut formant mon fichier PDF, à la recherche de la chaîne de caractère XMP méta, ligne à ligne. Si une ligne comporte à la fois la chaîne de caractère XMP méta, ainsi que la chaîne je recherche, commençant toujours par XMP et se terminant de la même manière, il suffit au moyen d'une petite fonction d'extraction, fonction que je vous mets dans le code ci-dessous, extraire le contenu chargé entre les deux balises.
Il ne nous vous reste plus qu'à afficher d'une manière relativement propre, et de la manière que vous souhaitez, les informations que vous venez d'extraire. Dans mon cas elles sont dans des DIV, afin de pouvoir leur appliquer un style CSS, décrit en début de fichier.

<?PHP
$lines = file('Sans titre_1.pdf');

function everythingintags($string, $tagname)
{
$pattern = "#<\s?$tagname\b[^>]>(.?)</$tagname\b[^>]>#s";
preg_match($pattern, $string, $matches);
return $matches[1];
}

foreach ($lines as $line_num => $line) {

if (strpos($line, "xmpmeta") !== false )
{
$a=$line;
}

}

function extractString($string, $start, $end) {
$string = " ".$string;
$ini = strpos($string, $start);
if ($ini == 0) return "";
$ini += strlen($start);
$len = strpos($string, $end, $ini) - $ini;
return substr($string, $ini, $len);
}

$string = filegetcontents('Sans titre_1.pdf');
echo '<div style="width:900px;height:180px;border:2px solid black;box-shadow: 20px 20px 20px lightgreen;font-size:70%;">';
echo '<div style="background-color:yellow;font-weight:bold;width:100%;text-align:center;">Propriétés du fichier</div>';
echo '<div style="width:25%;background-color:#ffe8e9;float:left;">Date de modification : </div><div style="background-color:#ffe8e9;width:100%;">'.date("d M Y, H:m:s",strtotime(extractString($string, '<xmp:ModifyDate>', '</xmp:ModifyDate>')))."</div>";
echo '<div style="width:25%;background-color: #e7f9dd;float:left;">Date de création : </div><div style="background-color: #e7f9dd;width:100%;">'.date("d M Y, H:m:s",strtotime(extractString($string, '<xmp:CreateDate>', '</xmp:CreateDate>')))."</div>";
echo '<div style="width:25%;background-color:#ffe8e9;float:left;">Générateur du PDF : </div><div style="background-color:#ffe8e9;width:100%;">'.extractString($string, '<xmp:CreatorTool>', '</xmp:CreatorTool>')."</div>";
echo '<div style="width:25%;background-color: #e7f9dd;float:left;">Identifiant du PDF : </div><div style="background-color: #e7f9dd;width:100%;">'.extractString($string, '<xmpMM:DocumentID>', '</xmpMM:DocumentID>')."</div>";
echo '<div style="width:25%;background-color:#ffe8e9;float:left;">ID de l\'instance du PDF : </div><div style="background-color:#ffe8e9;width:100%;">'.extractString($string, '<xmpMM:InstanceID>', '</xmpMM:InstanceID>')."</div>";
echo '<div style="width:25%;background-color: #e7f9dd;float:left;">ID de l\'auteur du PDF : </div><div style="background-color: #e7f9dd;width:100%;">'.extractString($string, '<rdf:li>', '</rdf:li>')."</div>";
echo '<div style="width:25%;background-color:#ffe8e9;float:left;">Titre du PDF :</div><div style="background-color:#ffe8e9;width:100%;">'.extractString($string, '<rdf:li xml:lang="x-default">', '</rdf:li>')."</div>";
echo '<div style="width:25%;background-color: #e7f9dd;float:left;">Sujet du PDF : </div><div style="background-color: #e7f9dd;width:100%;">'.extractString($string, '<rdf:Alt><rdf:li xml:lang="x-default">', '</rdf:li></rdf:Alt>')."</div>";
echo '<div style="width:25%;background-color:#ffe8e9;float:left;">Mots cles du PDF : </div><div style="width:100%;background-color:#ffe8e9;">'.extractString($string, '<rdf:Bag><rdf:li>', '</rdf:li></rdf:Bag>')."</div>";

echo '<div style="width:25%;background-color: #e7f9dd;float:left;">Producteur du PDF : </div><div style="background-color: #e7f9dd;width:100%;">'.extractString($string, '<pdf:Producer>', '</pdf:Producer>')."</div>";

echo '<div style="width:25%;background-color:#ffe8e9;float:left;">Date d\'écriture des métadata du PDF : </div><div style="width:100%;background-color:#ffe8e9;">'.date("d M Y, H:m:s",strtotime(extractString($string, '<xmp:MetadataDate>', '</xmp:MetadataDate>')))."</div>";
echo "</div>";
?>

 
dimanche, 30 août 2020 08:39

Un peu de programmation mais avec les API Instagram

Écrit par

La problématique

Difficile à placer cet article car il se trouve à cheval sur deux de mes rubriques principales : les API et la programmation. Cet article va plus parler de programmation car il est le résultat synthétique de mon travail d'hier, commenté. Pour celles et ceux qui suivent l'activité culturelle locale d'Aujourd'hui à Nancy, vous avez surement remarqué que, cofinement obligeant, j'ai recentré pas mal d'articles sur des artistes du monde entier, exposant leurs oeuvres sur Youtube, mais aussi Instagram. Et là, je me suis heurté à une problématique simple : chacun d'entre nous, que ce soit sur Facebook, Instagram, Twitter ou que sais-je encore comme réseau social, nous mettons, mais surtout nous changeons, pour certains très régulièrement, les photos de profil. Vous vous imaginez bien qu'une fois un articlé écrit, ne serait-ce au bout de 20, il n'est plus possible de suivre chacune des modifications des photos de profils de chacun des artistes que nous mettons en valeur. Alors que faire ?

Et ben moi, je connais un ptit gars qui s'interesse aux API du web... Pas vous ? Il possède même un site avec une rubrique dédiée aux API du web sur son site !

Comment résoudre le problème de récupération de la photo de profil Instagram et des autres données utilisateurs ?

Comme souvent, j'ai toujours tendance à minimiser en répondant : c'est simple. Oui c'est simple une fois qu'on a compris comment ca marchait. Alors, je vais vous coller mon code et vous le commenter. Toujours aussi peu fan de la programmation orientée objet, j'ai bien entendu tout codé sour la forme de fonction dont le paramètre, pour chacune d'entre elles, est une chaine de caractère représentant le nom de l'utilisateur. On y va.

Pour les puristes de l'objet, méthode dont j'ai horreur, je sais je suis rétrograde, mais j'assume, il y a une abbération car, je soupçonne la possibilité de faire de l'héritage. Mais ici, on n'est là pour faire fonctionner les choses, pas pour se poser des questions métaphysiques sur les optimisations patati patata..... Quant au CSS, oui il serait largement mieux dans un css externe, je suis entièrement d'accord.

NOTE : Pour celles et ceux qui l'ignorent, Instagram avait mis en place, à priori pour une durée qui n'est pas définitive, la possibilité de lister en JSON le contenu de ses données en ajoutant aux URL "/?__a=1". Je l'accorde, il faut le savoir. Mais quand on a trouvé ca, c'est la porte ouverte... à la suite de mon article !

Récupérer la photo de profil Instagram

function get_profile_IG_pic($user){
        $url = "https://www.instagram.com/".$user."/?__a=1";
        $contenu = json_decode(file_get_contents($url),true);
        return '<img src="'.($contenu["graphql"]["user"]["profile_pic_url_hd"]).'" style="float:left;margin-right:70px;overflow:hidden;-webkit-border-radius:150px;-moz-border-radius:150px;border-radius:150px;width:190px;height:190px;box-shadow: 15px 10px 10px black;">';
    }

Une fois lue (file_get_content), l'URL est décodée (json_decode) et grâce au paramètre true, transformée en tableau associatif. Il suffit donc d'afficher une première fois le tableau dans sa globalité pour visualiser où se trouve la donnée souhaitée, de la récupérer et de la retourner.

Récupérer la biographie de l'utilisateur

function get_profile_IG_bio($user){
        $url = "https://www.instagram.com/".$user."/?__a=1";
        $contenu = json_decode(file_get_contents($url),true);
        return nl2br($contenu["graphql"]["user"]["biography"]);
    }

Une fois lue (file_get_content), l'URL est décodée (json_decode) et grâce au paramètre true, transformée en tableau associatif. Il suffit donc d'afficher une première fois le tableau dans sa globalité pour visualiser où se trouve la donnée souhaitée, de la récupérer et de la retourner.

Compter le nombre de suiveurs de l'utilisateur (followers)

function get_nb_IG_followers($user){
        $url = "https://www.instagram.com/".$user."/?__a=1";
        $contenu = json_decode(file_get_contents($url),true);
        return nl2br($contenu["graphql"]["user"]["edge_followed_by"]["count"]);

    }

Une fois lue (file_get_content), l'URL est décodée (json_decode) et grâce au paramètre true, transformée en tableau associatif. Il suffit donc d'afficher une première fois le tableau dans sa globalité pour visualiser où se trouve la donnée souhaitée, de la récupérer et de la retourner. Ici, je rajoute un nl2br pour bien marquer les retours à la ligne puisque ce n'est pas du HTML de retourné mais du texte. Il faut donc transformer le code ASCII 13 en "retour chariot", c'est à dire en <br>, grâce à nl2bl

Récupérer le nom complet de l'utilisateur

function get_IG_fullname($user){
        $url = "https://www.instagram.com/".$user."/?__a=1";
        $contenu = json_decode(file_get_contents($url),true);
        return nl2br($contenu["graphql"]["user"]["full_name"]);
    }

Une fois lue (file_get_content), l'URL est décodée (json_decode) et grâce au paramètre true, transformée en tableau associatif. Il suffit donc d'afficher une première fois le tableau dans sa globalité pour visualiser où se trouve la donnée souhaitée, de la récupérer et de la retourner. Ici, je rajoute un nl2br pour bien marquer les retours à la ligne puisque ce n'est pas du HTML de retourné mais du texte. Il faut donc transformer le code ASCII 13 en "retour chariot", c'est à dire en <br>, grâce à nl2bl

Lire le contenu global

function get_IG_contenu($user){
        $url = "https://www.instagram.com/".$user."/?__a=1";
        return(json_decode(file_get_contents($url),true));
    }

Une fois lue (file_get_content), l'URL est décodée (json_decode) et grâce au paramètre true, transformée en tableau associatif. Il suffit donc d'afficher une première fois le tableau dans sa globalité pour visualiser où se trouve la donnée souhaitée, de la récupérer et de la retourner.

Conclusion

Alors en conclusion, mon programme ne fonctionnant actuellement que sur mon serveur local (je vous mets un lien pour télécharger le fichier), en passant la chaine "annapolina_" en paaramètre, mais je doute que tout le monde la connaisse. Que diriez vous plutot d'une copie d'écran de la page "Instagram" (enfin pas tout à fait puisque je ne liste que se dernieres publications) du Grand Michel GODET ?

Michel godet

 

 

 

Aujourd'hui, nous allons regarder de plus près une fonctionnalité qui pourrait être intéressante pour celles et ceux qui veulent suivre l'évolution d'une vidéo sur la plateforme Youtube. En effet, si vous utilisez YouTube en guise de recherche d'illustration vidéo, par exemple pour des articles de presse, vous n'êtes pas sans savoir que l'utilisateur ayant posté une vidéo, peut la supprimer. Et dans ce cas, elle n'apparaît plus dans votre article. Cet outil pourrait vous permettre de gérer un suivi des vidéos utilisées.
L'idée de ce petit tutoriel et de vous montrer comment savoir et comment faire pour suivre l'évolution d'une vidéo, mais surtout pour être informé de leurs suppressions (ou évidemment de la modification public/privé de chacune des vidéos que vous souhaitez suivre, le résultat étant le même).
Pour effectuer ce suivi, nous allons utiliser qui nous avons déjà vu il y a fort longtemps dans ce blog. Cet exemple n'est qu'une application de ce que l'on peut faire avec les API de YouTube.
En préambule, il faut connaître une information importante pour exploiter ce savoir-faire : lorsqu'une vidéo répond absente, avec l'API que je vais vous montrer, Google vous renvoie un nombre de résultat égal à 0 ou pas (0 symbolisant l'impossibilité de consulter en mode publique une vidéo). Il nous suffit donc de comparer le nombre de résultats obtenus sur l'ID passé en paramètres de l'API.
Dans mon exemple, je renvoie de la fonction vidéo existe, dans laquelle la référence de la vidéo est passé en paramètre, celui-ci étant issu du paramètre de l'URL, une valeur 0 ou 1,0 représentant une valeur, un représentant une valeur vrai. Je n'ai pas réussi à retourner un boulot en tant que tel. Il me semble qu'en PHP cela n'existe pas. À vérifier.
Quelle que soit la valeur retournée, vous pouvez à partir de cette fonction, tester si il y a vidéo que vous souhaitez existe réellement retourner un. Dans le cas contraire je vous savez que la vidéo n'existe pas, ou n'est pas accessible d'une manière public à vos utilisateurs.
<?php
function videoExiste($reference_video)
{
   $T = array();
   $temp = file_get_contents('https://www.googleapis.com/youtube/v3/videos?part=id%2C%20snippet%2C%20status&id='.$reference_video.'&key=VOTRE_CLEF_API');
   $T= json_decode($temp, true);
   if ($T["pageInfo"]["totalResults"] == 0)
      {
         return 0;
      }
   else
      {
         return 1;
      }
   }

echo videoExiste($_GET["id_video"]);
?>


 

Pour récupérer les X derrnieres video d'une chaine youtube, il faut simplement lancer une requete sur une API de Youtube. Bien entendu, vous devez avoir une clef API pour pouvoir accèder à cette fonctionnallité.

C'est le paramètre order dans l'appel de l'PAI qui permet de demander le tri des résultats.

Les données retournées le sont en JSO, j'utilise donc ma fonction de décodage du JSON en tableau, car je préfère manipuler un tableau qu'un JSON brut..

Une fois le JSON décodé, pour chacune des lignes du JSON que je parcours, j'affiche le titre de la video et la video en elle-même

mercredi, 10 juin 2020 18:30

Et si on instagrammait proprement ?

Écrit par

C'est après plusieurs semaines de recherche d'analyse et de lecture des différentes API, à propos de site internet de photographie Instagram, que j'ai enfin réussi à faire ce que je souhaitais, ou persque, méthode que je vais vous partager ici. ATTENTION : le voulais récupérer des photo en automatique mais je me suis heurté à un probleme humain : quelle photographies choisir ? Du coup, dans cet exemple, ce sera l'intégration de photos choisies une à une.

Sur mon site internet de mon agenda culturel , je ressence régulièrement des événements ayant trait la culture, chacun d'entre eux pouvant être agrémenté d'une ou plusieurs photos, afin d'illustrer les propos sur l'événement culturel. proposé. Parallèlement, avec la montée en puissance des réseaux sociaux, affin d'illustrer les événement que nous devons recenser, les organisateur et surtout artistes en relation avec le graphisme, nous envoient dans le communiqué de presse, un lien vers Instagram.

Ma problématique était la suivante : Instagram ne propose pas forcément d'API permettant de lister un ensemble d'illustrations, pouvant être associé à un événement culturel. De plus, comment mettre en relation es images entre elles afin d'en farie une galerie ? Il faut donc "picorer" dans l'ensemble des galeries ou des images uniques des artistes, pour pouvoir afficher une ou plusieurs photos en relation avec le sujet traité. C'est sur quoi j'ai travaillé aujourd'hui, et ai trouvé une solution afin de pouvoir générer une galerie photos, c'est-à-dire un ensemble de plusieurs photographies retournées par Instagram, Les retours sont en fait l'ensembles de informations "embed" du site de photographie Instagram, récupérés à partir des références. Pour contourner ma problématique, je demande aux utilisateurs de sélectionner même chacune des photos à afficher, ou une galerie si l'utilisateur en a déjà fait une sur Instagram.

A savoir : au niveau Instagram, que ce soit une photographie ou une galerie, Instagram considère que c'est la même chose. En d'autres termes, pour Instagram, une référence concerne toujours une galerie photos, celle-ci pouvant contenir une ou plusieurs photographies. Ce qui peut aussi se traduire ainsi : Il n'y a qu'une seule référence pour une publication, peu importe si cette publication possède une ou plusieurs images.

Parmi les (autres) choses à connaître, il faut aussi savoir qu'une photo sur Instagram possède deux types de références pour la même photo : la référence courte et la référence longue. Dans la documentation de l'API d'Instagram, il est bien stipulé qu'il faut toujours utiliser la référence courte.

Maintenant que nous avons toutes les compétences pour travailler, voici ce que j'ai fait. Mon petit programme prend en paramètre l'ensemble des références courtes de chacune des photos/galeries d'Instagram que vous souhaitez afficher sur votre site. Comme tes références vont être passées dans l'URL, afin de pouvoir les detecter les vidéos, elles sont concaténées avec un point-virgule (ce choix est tout à fait arbitraire, j'aurais pu prendre un autre caractère). Ainsi, je vais pouvoir récupérer cette chaîne de références des photo sous la forme : ref=CBD7I03CBBu;CA0wGqsp4ml;B_-WcOgC57L.

A l'aide de la commande d'explosion de chaîne (explode) sur un caractère (ici le point-virgule), nous allons transformer cette chaîne dans un tableau de références. Pour chacune des références de ce tableau, je récupère le contenu sur Instagram de cette référence, celle-ci m'étant renvoyée au format JSON. Je la decode afin d'en extraire son contenu, pour pouvoir, dans le résultat issu du décodage, en extraire le code html à afficher.

Il ne vous reste plus qu'à intégrer ces images soit en brut dans une balise <IMG SRC="">, soit au travers d'une galerie d'images de votre choix (il en existe des tonnes en JQuery), afin de personnaliser l'ensemble des photos extraites d'Instagram que vous souhaitez d'afficher sur votre site.

Notez au passage que l'API d'instagram stipule bien qu'aucune identification n'est necessaire, il n'y en a donc aucune dans mon fichier, ce qui explique pourquoi vous pouvez le télécharger ici.

 

Page 1 sur 2