Adrien Poupa

Software Engineering student

Menu Close

Author: Adrien Poupa (page 1 of 2)

Introducing Vinyl Music Player

We all listen to music on our smartphones. Since I’m old-fashioned, I still have a local library and no Spotify subscription. I’ve been using the Phonograph music player for a few years but after having see its development stopped for a few months, its creator decided to put some of its best features behind a paywall. For instance, it was not longer possible to browse files to play a music.

Read more

Tweak Ubuntu 17.10 to Make It Feel Like Home

I recently switched from Windows 10 to Ubuntu 17.10, which has ditched Unity in favor of Gnome 3. However, by default, the interface is not very friendly nor familiar for long-time Windows users. Here is what I did to make it feel like home – to me, at least.

Read more

Formalités pour étudier au Canada

Depuis Septembre, je suis étudiant en Masters de Software Engineering à l’Université de Concordia, à Montréal ! J’en suis très heureux, mais les formalités administratives qui ont précédé ce moment ont été plutôt lourdes et nombreuses. Il m’avait été assez difficile de trouver des ressources complètes sur ces démarches. J’écris donc cet article pour les futurs étudiants (pourquoi pas de l’Efrei) destinés à partir au Canada, et même au Québec pour être plus précis.

Read more

Certificat SSL avec Let’s Encrypt, Nginx et CloudFlare

Avec Google qui fait ressortir les sites en HTTPS prioritairement et Firefox qui affiche désormais un joli message d’avertissement lors du remplissage d’un formulaire de connexion en HTTP, il est temps d’installer un certificat SSL sur vos sites, d’autant plus que c’est gratuit ! Nous allons en effet nous servir de Let’s Encrypt, fondation à but non lucratif qu’on ne présente plus, qui a l’avantage de fournir gratuitement des certificats SSL acceptés par tous les navigateurs modernes.

Read more

Mise en place d’un environnement chroot avec identification en clés SSH

chroot

Sur mon serveur dédié, je voulais mettre en place un environnement chroot afin de pouvoir donner un accès limité à leur espace à des utilisateurs externes.

La mise en place d’un tel espace n’est pas complexe en soit, mais j’ai en revanche eu beaucoup plus de mal à activer la connexion par un jeu de clés SSH.

Nous allons partir du principe que le système est déjà configuré pour la connexion avec des clés SSH.

On crée notre utilisateur “utilisateur”

useradd utilisateur

Ici, on va donc appliquer notre prison à l’utilisateur “utilisateur”, partir du principe que son répertoire de chroot est /home/www/utilisateur (pour de l’hébergement par exemple).

Read more

Autocomplétion des adresses avec la Base Adresse Nationale

ban

Lors de mon stage à Diagamter cet été, j’ai eu pour tâche de créer un formulaire d’autocomplétion des adresses. Après avoir fait un tour d’horizon des outils disponibles, un m’a marqué : la Base Adresse Nationale. Tout d’abord parce cette API est officielle, qu’elle peut faire office de référence ; toutes les modifications de communes y sont répertoriées rapidement. Ensuite, elle simple, bien documentée et n’a pas de quota de requête à ma connaissance.

Le but est donc de mettre en place un formulaire simple qui va envoyer des requêtes à l’API lorsqu’on saisit d’abord le code postal, puis la ville et enfin l’adresse en elle-même. On va donc se servir de jQuery et jQuery UI pour mettre en place l’autocomplétion :

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.7.3/themes/base/jquery-ui.css">

Ensuite, on met en place les inputs en eux-mêmes :

<input name="cp" id="cp" type="text" placeholder="CP">
<input name="ville" id="ville" type="text" placeholder="Ville">
<input name="adresse" id="adresse" type="text" placeholder="Adresse">

Enfin, on s’attaque aux fonctions d’autocomplétion : tout d’abord le code postal. Le but est de saisir un code et d’afficher la ville à laquelle il est rattaché. Par exemple, si on tape “31000”, on obtiendra “31000 – Toulouse”. Un clic dessus permettra de remplir les deux premiers champs. De la même façon, si on tape “Toulouse” dans le deuxième champ, on aura le même résultat.

On décode ensuite l’objet json GeoCode retourné pour exploiter le code postal, le nom de la ville et l’adresse.

Code des trois autocomplétions :

<script>
$("#cp").autocomplete({
	source: function (request, response) {
		$.ajax({
			url: "https://api-adresse.data.gouv.fr/search/?postcode="+$("input[name='cp']").val(),
			data: { q: request.term },
			dataType: "json",
			success: function (data) {
				var postcodes = [];
				response($.map(data.features, function (item) {
					// Ici on est obligé d'ajouter les CP dans un array pour ne pas avoir plusieurs fois le même
					if ($.inArray(item.properties.postcode, postcodes) == -1) {
						postcodes.push(item.properties.postcode);
						return { label: item.properties.postcode + " - " + item.properties.city, 
								 city: item.properties.city,
								 value: item.properties.postcode
						};
					}
				}));
			}
		});
	},
	// On remplit aussi la ville
	select: function(event, ui) {
		$('#ville').val(ui.item.city);
	}
});
$("#ville").autocomplete({
	source: function (request, response) {
		$.ajax({
			url: "https://api-adresse.data.gouv.fr/search/?city="+$("input[name='ville']").val(),
			data: { q: request.term },
			dataType: "json",
			success: function (data) {
				var cities = [];
				response($.map(data.features, function (item) {
					// Ici on est obligé d'ajouter les villes dans un array pour ne pas avoir plusieurs fois la même
					if ($.inArray(item.properties.postcode, cities) == -1) {
						cities.push(item.properties.postcode);
						return { label: item.properties.postcode + " - " + item.properties.city, 
								 postcode: item.properties.postcode,
								 value: item.properties.city
						};
					}
				}));
			}
		});
	},
	// On remplit aussi le CP
	select: function(event, ui) {
		$('#cp').val(ui.item.postcode);
	}
});
$("#adresse").autocomplete({
	source: function (request, response) {
		$.ajax({
			url: "https://api-adresse.data.gouv.fr/search/?postcode="+$("input[name='cp']").val(),
			data: { q: request.term },
			dataType: "json",
			success: function (data) {
				response($.map(data.features, function (item) {
					return { label: item.properties.name, value: item.properties.name};
				}));
			}
		});
	}
});
</script>

Fiddle de démonstration :

Installer un serveur web LNPM (Linux, Nginx, PHP, MariaDB)


Source: unixmen.com

Cet article est surtout là pour me servir de pense-bête en cas de réinstallation d’un serveur, mais sait-on jamais, il peut être utile à d’autres 🙂

Le but est de mettre en place un serveur web qui soit le plus léger possible ; pour ce faire, j’utilise Linux et sa distribution Debian (8 Jessie pour le tutoriel ci-dessous, mais facilement adaptable pour d’autres version), Nginx en remplacement d’Apache, PHP 7 en FPM et MariaDB en remplacement de MySQL.

Read more

Bangkok : the big mango

Temple Wat Pho

Dernier voyage de mon immersion, mais pas des moindres : Bangkok ! Par une matinée à la chaleur dévastatrice, nous commençons par visiter l’incontournable Grand Palace (Palais royal). Malheureusement, il était bondé de touristes. Pour ne rien arranger, nous étions arrivés lors de la journée la plus sainte de leur calendrier, le Visakha Bucha : anniversaire du Bouddha, cette journée est la plus importante du calendrier religieux en Thaïlande, où 90% de la population est bouddhiste. Nous avons ainsi pu voir des cohortes de thaïlandais prier lors dans les temples que nous visitions, ce qui était assez unique et inattendu.

Read more

Quelques jours à Bali

Pura Ulun Danu Bratan après la tempête

Pura Ulun Danu Bratan après la tempête

Pour ma première sortie hors de Malaisie, j’ai décidé de ne pas faire les choses à moitié et d’aller en Indonésie sur l’île de Bali, destination dont la simple évocation suffit à faire rêver et imaginer des paysages idylliques. C’est en partie vrai !

Quatre jours ne suffisent pas mais permettent de se faire une bonne idée de l’île. De toute façon, j’ai quand même quelques cours entre mes voyages 😉

Read more

Laravel : envoi du token CSRF lors d’un appel Ajax

Lors d’une requête POST en Ajax sous Laravel 5, il faut passer le jeton CSRF sous peine de recevoir une erreur de TokenMismatch, la protection contre les failles CSRF s’activant. Pour ce faire, je ne trouve pas la documentation très simple, alors qu’il suffit de passer l’attribut ‘_token’ dans le champ data (sous jQuery).

Ainsi, il n’y a qu’une ligne à rajouter :

$.ajax({
	type: "POST",
	url: "{{ url('/votre-url') }}",
	data: {
		...
		_token: "{!! csrf_token() !!}"
	}
})

Une alternative consiste à rajouter le champ complet contenant le jeton dans le fichier de template adéquat :

{!! csrf_field() !!}

Puis de recopier un code similaire au précédent, à ceci près qu’il ira chercher le code rajouté plus haut dans la page :

$.ajax({
	type: "POST",
	url: "{{ url('/votre-url') }}",
	data: {
		...
		_token: $('meta[name="csrf-token"]').attr('content')
	}
})