Tech de Gamuza

DDEV - Configuration pour utiliser mariadb de l'hôte

Christophe — 2024-11-15T08:30:23Z

# Configuration pour utiliser mariadb de l'hôte

## 1. Configuration de DDEV

Il faut ajouter un fichier à la racine de son sous dossier .ddev (de son projet) : docker-compose.override.yaml

services: db: extra_hosts: - "host.docker.internal:host-gateway" environment: - MYSQL_HOST=host.docker.internal

Apres avoir redémarré ddev, si vous vous connectez dans le conteneur db, vous pourrez voir que la commande suivante fonctionne ping host.docker.internal Pour ce

## 2. Configuration de mysql de l'hôte.

Il faut modifier votre instance de mysql/mariadb pour qu'elle écoute toutes les ip et pas seulement localhost. Pour cela il faut changer dans la conf de mariadb my.cnf la ligne : bind-address = localhost par bind-address = 0.0.0.0 En terme de sécu, c'est un peu moins bien ;-)

## 3. User mysql pour le spip

Il faut que votre user mysql est comme nom d'hôte % et non localhost

## 4. Configuration du spip

Il faut changer dans le fichier connect.php :

* le nom d'host devient host.docker.internal
* le port 3306 (inchangé)
* user -> celui défini dans l'étape 3

DDEV - Personnalisation de phpmyadmin

Christophe — 2024-11-15T08:25:21Z

Si vous souhaitez modifier la configuration de phpmyadmin, en utilisant un fichier config.user.inc.php

1. dans le fichier : docker-compose.phpmyadmin.yaml, ajouter dans la clé phpmyadmin :

services: phpmyadmin: build: context: ./phpmyadmin

2. Il faut maintenant créer le dossier phpmyadmin dans .ddev : mkdir phpmyadmin
3. Ajouter dans ce dossier un fichier Dockerfile avec le contenu suivant :

FROM phpmyadmin:5.2.0 COPY config.user.inc.php /etc/phpmyadmin/config.user.inc.php

4. Ajouter dans ce dossier votre fichier config.user.inc.php ex :

<?php $cfg['TablePrimaryKeyOrder'] = 'DESC'; $cfg['MaxNavigationItems'] = 100;

5. Relancer ddev

Compiler imagemagick pour ajouter les delegated

Christophe — 2023-09-14T08:33:18Z

# tranformer une image (jpg) en pdf
Si la commande convert toto.jpg toto.pdf
vous renvoie l'erreur :
>ImageMagick : No decode delegate for this image format

cela veut dire que imagemagick n'est pas compilé avec les bons delegates
la commande convert -list configure | grep DELEGATES ne doit pas vous retourner jpeg

Pour résoudre ce problème, il faut compiler le paquet à la main :

sudo apt update sudo apt install build-essential sudo apt install -y libjpeg-dev wget https://www.imagemagick.org/download/ImageMagick.tar.gz tar xvzf ImageMagick.tar.gz cd ImageMagick-[version_number] ./configure --disable-shared sudo make sudo make install sudo make check

OSM AND+ ajouter carte IGN

Christophe — 2021-11-09T07:53:06Z

Ajouter les fonds de carte IGN TOP25 sur l'appli mobile OSM and +

Installer OSM AND +

https://osmand.net/
sur Fdroid : https://f-droid.org/fr/packages/net.osmand.plus/

Geoportail

Créer un compte sur : https://geoservices.ign.fr/
Créer un clé de services web
- MON ESPACE > Mes clés de services web
- Créer une clé
- Usage gratuites des SCAN 25/100/OACI
- Copier sa clé !

Création de l'URL

Remplacer MaCleWebIGN par la clé copié précédemment https://wxs.ign.fr/MaCleWebIGN/geoportail/wmts?layer=GEOGRAPHICALGRIDSYSTEMS.MAPS&style=normal&tilematrixset=PM&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix={0}&TileCol={1}&TileRow={2}
Pour tester votre clé, pour pouvez afficher l'url ci dessous dans votre navigateur, après avoir de nouveau remplacé votre clé https://wxs.ign.fr/MaCleWebIGN/geoportail/wmts?Layer=GEOGRAPHICALGRIDSYSTEMS.MAPS&Style=normal&TileMatrixSet=PM&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&FORMAT=image/jpeg&TileMatrix=15&TileCol=16810&TileRow=11700

Configuration de OSM AND

menu > Paramétrer la carte > Carte en ligne > Ajouter
- Nom : celui que vous voulez, ex IGN
- Lien : le premier lien créé ci dessus
- stockage : SQLiteDB
- Les autres champs : laisser par défaut.

Télécharger un fond de carte IGN pour un usage hors-ligne

Sélectionner la carte en ligne à télécharger
- volet > Paramétrer la carte > Carte en ligne…
Zoomer/dézoomer pour n'afficher que la portion de carte à télécharger ;
Faire un appui long sur la carte avec votre doigt ;
Sur le menu qui apparaît en bas de l'écran, sélectionner “Actions” ;
Télécharger une carte
Sélectionner le niveau de zoom maximal à précharger ;
Télécharger

Liens trouvé après la rédaction d'une grande partie de cette article :
https://www.randonner-leger.org/wiki/doku.php?id=osmand

SCSS - creer les média queries avec la bonne largeur background-image()

Christophe — 2019-11-25T10:44:30Z

Quand on veut sélectionner une image background pour chaque breakpoint, on peut utiliser tout le potentiel de SCSS

$image_bg: 480, 576, 768, 992, 1200; @each $bp in $image_bg { @media screen and (min-width: #{$bp}px) { .maDiv { background-image: url('img/bg_#{$bp}.jpg'); } } }

Si on veut utiliser des variables de breakpoint :

$tiny: 480px !default; // or 'em' if you prefer, of course $smal: 576px !default; $medium: 768px !default; $large: 992px !default; $extra-large: 1200px !default; $list: $tiny, $small, $medium, $large, $extra-large; // fonction qui supprime les unités sans connaitre à l'avance l'unité @function supprimer_uniter($nbr) { @if type-of($nbr) == 'nbr' and not unitless($nbr) { @return $nbr / ($nbr * 0 + 1); } @return $nbr; } @each $l in $list { /* Si on connait à l'avance l'unité*/ $bp: $l / 1px; /* Si on ne connait pas à l'avance l'unité*/ $bp: supprimer_uniter($l); @media screen and (min-width: #{$bp}px) { .maDiv { background-image: url('img/bg_#{$bp}.jpg'); } } }

Le code généré sera :

@media screen and (min-width: 480px) { .maDiv { background-image: url("img/bg_480.jpg"); } } @media screen and (min-width: 576px) { .maDiv { background-image: url("img/bg_576.jpg"); } } @media screen and (min-width: 768px) { .maDiv { background-image: url("img/bg_768.jpg"); } } @media screen and (min-width: 992px) { .maDiv { background-image: url("img/bg_992.jpg"); } } @media screen and (min-width: 1200px) { .maDiv { background-image: url("img/bg_1200.jpg"); } }

Cahier des charges : PHP - Mysql

Christophe — 2019-05-30T11:50:54Z

Objectif : Réaliser une liste de courses

Présentation :

Vous devez réaliser une application web monopage permettant la création et l'utilisation d'une liste de courses.
Cette page devra avoir un header, une barrenav, un content, (aside si besoin) et un footer. Vous pouvez utiliser un framework css. Attention, cette page devra être responsive.

Fonctionnalités attendues :

Etape 1 : affichage
Le tableau d'affichage doit comporter :

l'affichage de la quantité et du nom du produit
Un bouton pour cocher une ligne (fait)
Un bouton pour supprimer une ligne
Afficher le nombre total de produits
Afficher le nombre total de produits non cochés

Etape 2 : insertion

Créer un formulaire pour ajouter une ligne : Nom du produit et Quantité
Vérifier que le nom du produit ait plus de 3 caractères
Vérifier que la quantité soit un entier

Etape 3 : modification

Ajouter deux boutons pour modifier la quantité (bouton + / -).

Etape 4 : trier

Ajouter deux boutons de tri du tableau (Attention : ces boutons doivent modifier la requête mysql de sélection) : par Nom et par Quantité

Etape 5 : ajax

Transformer toutes les actions en bdd en AJAX

Bonus 1 : autocomplétion
Ajouter l'autocomplétion sur le nom du produit dans le formulaire de création.
Pour cela, vous devez utiliser une bdd.

Bonus 2 : mode hors ligne
Vous devez pouvoir utiliser sur votre téléphone votre liste de course sans connexion internet. Il faut que le bouton : cocher fonctionne (enregistre) pour pouvoir synchroniser à votre retour chez vous.

Bonus 3 : enregistrer ses listes
Pouvoir enregistrer ses listes (avec un nom) et pouvoir les recharger.

Bonus 4 : libre !!