Design & Développement web - Le topic des canards qui mangent des cookies

**tompalmer** · 19/10/2022, 17h16

Envoyé par Wobak

Je comprends pas pourquoi tu aurais besoin de faire une regexp comme ça, mais je dirais :

Code:

www.monsite/banane/[^/]*/?_sort_by=date_desc

Bah disons que c'est un Workaround par rapport au fait que la liste s'affiche dans le mauvais ordre par defaut, je sais a peu près pourquoi mais c'est pas un easy fix.
La liste étant en AJAX, elle affiche les filtres en ajoutant des Paramètres d'URL, ce qui est pratique

En passant du coup ca marche pas, mais je commence a penser que ca peut pas être fait avec le plug in de redirection que j'utilise, je vais tester le plan B

**Foksadure** · 19/10/2022, 19h13

Et dans le traitement des paramètres transmis via l'URL, tu ne peux pas faire en sorte que si _sort_by est null, alors la valeur par défaut date_desc s'applique ?

**tompalmer** · 19/10/2022, 20h37

Tout ce que je sais, c'est que c'est une liste que je réutilise a plusieurs endroits. Mais la elle est en mode "archive" pour afficher un set d'informations spécifiques a la page.

Si je la retrie a la main ca marche, mais par défaut ca affiche un ordre semi random, ce qui est un pb assez mineur mais confusant pour l'end user

**Foksadure** · 20/10/2022, 01h28

Si cette liste est transmise en Ajax, il suffit de modifier le code qui la renvoie pour qu'elle soit systématiquement triée si aucun ordre n'est spécifié via la variable "_sort_by".

Quel que soit le langage de programmation web utilisé, ça tient en une ligne.

**Naity** · 21/10/2022, 05h23

Envoyé par tompalmer

J'ai une URL comme ceci qui est sensé afficher une liste

www.monsite/banane/type_de_banane/

Si l'url reste ainsi, la liste de bananes s'affiche dans un ordre Random

Ce que je veux, c'est forcer cette URL, qui fera que la liste s'affiche bien, comme celle ci

www.monsite/banane/type_de_banane/?_sort_by=date_desc

C'est pas un truc que tu peux faire dans ton .htaccess ? Utiliser "Rewrite" pour que si l'utilisateur _charge type_de_banane, type_de_banane/?sort_by=date_desc soit chargé a la place?

- - - Mise à jour - - -

Envoyé par raaaahman

Visuellement ça commence bien. Par contre je t'invite à te renseigner sur la "sémantique" du HTML. Actuellement, il y a peu de chance qu'une recherche amène quelqu'un sur ta page vu comment l'information n'est pas du tout hiérarchisée

Tu as anticipè ma question, notemment les "best practoces" sur l'organisation du fichier html et des dossiers de mon projet web (je suis parti en freestyle et c'est le bordel).

Tu as une bonne ressource a conseiller sur le sujet?

Le référencement est pas la priorité, c'est plus un bac a sable pour apprendre (j'avais besoin du domaine pour heberger le wordpress de ma vae, autant aussi en profiter pour apprendre)

- - - Mise à jour - - -

Envoyé par raaaahman

Par contre si en trois jours tu fais déjà du Git, je t'embauche(rai)*

*Offre sans garantie de délai.

Je sais pas si je "fais du git". J'ai git sur mon pc et l'interface github desktop, sur laquelle je gere le repository de ma page web, page que j'édite sous VS Code. Ca reste assez basique: je ne branch pas (je ne vois pas trop l'interret en étant seul, du moins tans que je ne veux pas bisser sur une v2 en parallèle). J'aimerais pouvoir "commut" les changements automatiquement les changements sur mon site plutot que de remplacer manuellement les fichiers sur mon ftp, ce qui doit être possible, mais je ne m'y suis pas encore penché.

Par ailleurs, j'aimerais tester des changements en local. Ca se fait via un web server sur localhost c'est ca?

**deathdigger** · 21/10/2022, 08h22

T'as deux possibilités : Soit t'installes Apache/PHP/MySQL sur ton poste (si tu es sur windows tu cherches WAMP), soit, si tu ne veux pas "polluer" ton PC, tu installes une machine virtuelle avec un Linux dessus sur lequel t'installes ces trois services.
Tu peux aussi passer par des conteneurs mais ça dépasse mes compétences

Le repository de ta page web, tu l'as bien sur le net aussi ? (genre github ou gitlab )

**Foksadure** · 21/10/2022, 08h44

Envoyé par deathdigger

(si tu es sur windows tu cherches WAMP)

Pour quelqu'un qui veut se concentrer sur le code web classique et pas la technique, je recommande uWAMP.

https://www.uwamp.com/fr/

Tout intégré, portable et la configuration se gère dans l'interface d'administration.

Pour la structure du dossier www/mon_site, le classique quand on bosse sans IDE, c'est de créer des sous-dossier par type de ressource, dans le dossier principal du site ou de l'appli :

js pour javascript, dans lequel on mettra aussi les éventuels frameworks utilsés (jquery, etc), leurs plug-ins et leurs dépendances
css pour les feuilles de style du projet
img si on a des images
db pour la bdd, s'il y en a une monofichier comme sqlite (a proscrire en production par contre, pour ne pas que la base soit téléchargeable, sauf à verrouiller l'accès autrement)

Ces ressources seront référencées dans le html en tête ou pied de page.

Si le site à plusieurs page de même structure et qu'on utilise un langage de prog (PHP par exemple), on créera un fichier d'en-tete et/ou pied de page séparé(s), qui sera incorporé à la page par un include ou require.

https://www.w3schools.com/PHP/php_includes.asp

**Dross** · 21/10/2022, 08h53

Vous avez Docker aussi pour développer sans polluer votre bécane. Ce n'est pas beaucoup plus compliqué et ça rajoute une flexibilité / isolation bienvenue.

**GrandFather** · 21/10/2022, 09h21

Je plussoie pour Docker, par contre ça ne reste relativement simple que tant qu’on ne se lance pas dans de la customisation d’image, pour laquelle il faut des compétences d’administration système et bien avoir intégré le principe de fonctionnement d’un container, et c’est pas trivial. Maintenant, le repository de Docker est suffisamment riche pour couvrir tous les besoins courants sans avoir besoin de mettre les mains dans le cambouis.

**war-p** · 21/10/2022, 09h26

Envoyé par Dross

Vous avez Docker aussi pour développer sans polluer votre bécane. Ce n'est pas beaucoup plus compliqué et ça rajoute une flexibilité / isolation bienvenue.

Oui mais ça dépasse les compétences de Deathdigger

Pour installer une stack php, c'est assez facile, faut chopper les images suivantes
- mysql : https://hub.docker.com/_/mysql
- httpd et php : https://hub.docker.com/_/php

Il faut bien lire la doc, au pire je pense qu'on peut être plusieurs ici à faire le SAV pour du docker basique.

**Wobak** · 21/10/2022, 09h37

Envoyé par war-p

Oui mais ça dépasse les compétences de Deathdigger

Pour installer une stack php, c'est assez facile, faut chopper les images suivantes
- mysql : https://hub.docker.com/_/mysql
- httpd et php : https://hub.docker.com/_/php

Il faut bien lire la doc, au pire je pense qu'on peut être plusieurs ici à faire le SAV pour du docker basique.

Je vais recommander d'utiliser linuxserver.io quand on n'y connait rien, ils ont rajouté des trucs qui normalisent un peu l'usage de manière un peu plus sécure.

https://docs.linuxserver.io/

**raaaahman** · 21/10/2022, 09h56

Il y a même la surcouche Lando qui propose des "recettes" clé-en-main pour les stack courantes. Pour le coup, c'est aussi simple que d'installer un WAMP (et aussi "simple" à paramétrer qu'un WAMP

)...

Mais il y a encore plus simple, vu que tu utilises npm pour gérer tes bibliothèques Javascript, en installant un "bundler/build tool" (Webpack/Parcel/Rollup/Vite), tu gagnes également accès à un serveur local très simple à faire tourner. Note que le bundler est un élément essentiel du déploiement continu, si tu t'engages dans cette voie.

Sachant que de toutes façons, un site statique, une fois généré (tu dois au moins convertir le code Tailwind en CSS natif), tu peux faire clic droit > lire avec un autre programme > (ton navigateur préféré) sans avoir besoin de serveur qui tourne sur ta machine.

Envoyé par Naity

Tu as une bonne ressource a conseiller sur le sujet?

Le référencement est pas la priorité, c'est plus un bac a sable pour apprendre (j'avais besoin du domaine pour heberger le wordpress de ma vae, autant aussi en profiter pour apprendre)

De mémoire le tutoriel de Mathieu Nebra sur Open Classroom expliquait assez bien les bases. Tu as aussi le Mozilla Developer Network, qui dois devenir ta source d'information principale si tu t'aventures dans le web (cet article à l'air utile: https://developer.mozilla.org/fr/doc...site_structure, celui-ci pour ajouter de l'accessibilité: https://developer.mozilla.org/fr/doc...ssibility/HTML).

Ces "bonnes pratiques" n'ont de but que de permettre à ton site d'être plus facilement découvert et parcouru par des utilisateurs qui sont intéressé par son contenu (des recruteurs qui cherchent un Ingé en Génie électrique, par exemple), en d'autre termes: être bien référencé.

Je sais pas si je "fais du git". J'ai git sur mon pc et l'interface github desktop, sur laquelle je gere le repository de ma page web, page que j'édite sous VS Code. Ca reste assez basique: je ne branch pas (je ne vois pas trop l'interret en étant seul, du moins tans que je ne veux pas bisser sur une v2 en parallèle).

Tu as un code source qui est versionné, et c'est ce qui compte (après, il vaut mieux que tes commits soient fréquents, sinon tu perds les avantages du versionnage). De toutes façons, si tu comprends les nom barbares des commandes de Git et que tu sait ce qu'elles font, tu peux tout aussi bien les taper en ligne de commande "comme un barbu"(TM).

J'aimerais pouvoir "commut" les changements automatiquement les changements sur mon site plutot que de remplacer manuellement les fichiers sur mon ftp, ce qui doit être possible, mais je ne m'y suis pas encore penché.

Si tu veux "commute", je te conseille le métro, vu le prix de l'essence en ce moment...

Blague à part (qu'est-ce qu'on s'marre), c'est le Déploiement Continu. Tu peux mettre ça en place avec des services comme GitHub/GitLab et des hébergeurs comme Heroku/Netlify/Vercel. Si tu veux que ce soit spécifiquement déployé sur ton serveur OVH, voir le détail de la pipeline d'un de mes précédents messages. Sinon y'a probablement moyen de faire plus simple avec hébergement du code source sur GitHub, automatisation avec les GitHub Actions, et déploiement sur les GitHub Pages. Mais je te conseille de faire une V1 de ta page en local pour le moment, tu verras par la suite si tu as besoin de publier des changements.

**deathdigger** · 21/10/2022, 10h12

Envoyé par war-p

Oui mais ça dépasse les compétences de Deathdigger

Pour installer une stack php, c'est assez facile, faut chopper les images suivantes
- mysql : https://hub.docker.com/_/mysql
- httpd et php : https://hub.docker.com/_/php

Il faut bien lire la doc, au pire je pense qu'on peut être plusieurs ici à faire le SAV pour du docker basique.

N'empêche, va vraiment falloir que je m'y mette pour voir à quoi ça ressemble. C'est comme Git, jusqu'à il y'a un an ou deux, je ne l'avais jamais utilisé.

**war-p** · 21/10/2022, 10h46

Envoyé par deathdigger

N'empêche, va vraiment falloir que je m'y mette pour voir à quoi ça ressemble. C'est comme Git, jusqu'à il y'a un an ou deux, je ne l'avais jamais utilisé.

Tu utilisais autre chose?

**Shurin** · 21/10/2022, 10h54

Envoyé par war-p

Tu utilisais autre chose?

Il envoyait des .txt à ses collègues avec les modifications

**Dross** · 21/10/2022, 18h17

Envoyé par war-p

Oui mais ça dépasse les compétences de Deathdigger

Pour installer une stack php, c'est assez facile, faut chopper les images suivantes
- mysql : https://hub.docker.com/_/mysql
- httpd et php : https://hub.docker.com/_/php

Il faut bien lire la doc, au pire je pense qu'on peut être plusieurs ici à faire le SAV pour du docker basique.

En fait, il suffit de trouver le bon docker-compose et ça deviens trivial. Au bureau quand j'ai un stagiaire / jeune qui dois installer une stack de dev je lui dis ça :

* Installe Docker Desktop
* Prends ce fichier docker-compose.yml et met le dans un dossier
* Ouvre une ligne de commande dans le répertoire (attention ! la difficulté augmente !) et tu tape "docker-compose up -d"

Pour une stack PHP, j'ai justement ça qui traîne sur ma machine mais on peux en trouver d'autres sur le web avec les bon mots clés :

Code:

version: "3"

networks:
  phpnetwork:
    external: false

services:
  db:
    container_name: mariadb
    image: mariadb:latest
    restart: unless-stopped
    environment:
      - MARIADB_ROOT_PASSWORD=notSecureChangeMe
    volumes:
      - ./mariadb-volume:/var/lib/mysql
    networks:
      - phpnetwork

  phpmyadmin:
    container_name: phpmyadmin
    image: phpmyadmin:latest
    restart: unless-stopped
    ports:
      - "5900:80"
    depends_on:
      - db
    environment:
      - UPLOAD_LIMIT=300M
    networks:
      - phpnetwork

  apache:
    container_name: apache
    image: php:7.4-apache
    restart: unless-stopped
    ports:
      - "5901:80"
    depends_on:
      - db
    volumes:
      - ./www-data:/var/www/html
    networks:
      - phpnetwork
    command: bash -c "a2enmod rewrite;docker-php-ext-install mysqli;docker-php-ext-enable mysqli;apache2-foreground"

Tu met tes fichiers dans le répertoire "www-data", ton site web est dispo sur localhost:5901, phpmyadmin localhost:5900 et ta db (pour la configurer dans ton code/phpadmin) c'est juste "db" / root / notSecureChangeMe.

Franchement, c'est moins chiant que de le laisser essayer d'installer une stack et avec 36 trucs qui marchent pas car il n'a pas encore changé tel ou tel paramètre. (Ou fait une erreur lors de l'installation et on va prendre 2h à trouver la connerie).

**war-p** · 21/10/2022, 18h31

Ohhh ce syndrome TGCM!

**Dross** · 21/10/2022, 18h43

Clairement.

La première fois que j'ai vraiment voulu comprendre docker/docker-compose c'était avec l'exemple suivant, "docker-compose up" et...

* J'ai un front qui s'autocompile avec npm
* J'ai un backend en .NET
* J'ai une bdd postgres
* J'ai un cache Redis
* J'ai un pipeline RabbitMQ

Tout ça qui tourne et est dispo, avec les ressources configurées les unes aux autres, alors que j'ai rien fait.
Tu coupe la console ? Tout s'enlève de ta machine et rien ne reste dans les coins.

J'étais, heu, QUOI ?

**Wobak** · 21/10/2022, 19h15

Envoyé par Dross

En fait, il suffit de trouver le bon docker-compose et ça deviens trivial. Au bureau quand j'ai un stagiaire / jeune qui dois installer une stack de dev je lui dis ça :

* Installe Docker Desktop
* Prends ce fichier docker-compose.yml et met le dans un dossier
* Ouvre une ligne de commande dans le répertoire (attention ! la difficulté augmente !) et tu tape "docker-compose up -d"

Pour une stack PHP, j'ai justement ça qui traîne sur ma machine mais on peux en trouver d'autres sur le web avec les bon mots clés :

Code:

version: "3"

networks:
  phpnetwork:
    external: false

services:
  db:
    container_name: mariadb
    image: mariadb:latest
    restart: unless-stopped
    environment:
      - MARIADB_ROOT_PASSWORD=notSecureChangeMe
    volumes:
      - ./mariadb-volume:/var/lib/mysql
    networks:
      - phpnetwork

  phpmyadmin:
    container_name: phpmyadmin
    image: phpmyadmin:latest
    restart: unless-stopped
    ports:
      - "5900:80"
    depends_on:
      - db
    environment:
      - UPLOAD_LIMIT=300M
    networks:
      - phpnetwork

  apache:
    container_name: apache
    image: php:7.4-apache
    restart: unless-stopped
    ports:
      - "5901:80"
    depends_on:
      - db
    volumes:
      - ./www-data:/var/www/html
    networks:
      - phpnetwork
    command: bash -c "a2enmod rewrite;docker-php-ext-install mysqli;docker-php-ext-enable mysqli;apache2-foreground"

Tu met tes fichiers dans le répertoire "www-data", ton site web est dispo sur localhost:5901, phpmyadmin localhost:5900 et ta db (pour la configurer dans ton code/phpadmin) c'est juste "db" / root / notSecureChangeMe.

Franchement, c'est moins chiant que de le laisser essayer d'installer une stack et avec 36 trucs qui marchent pas car il n'a pas encore changé tel ou tel paramètre. (Ou fait une erreur lors de l'installation et on va prendre 2h à trouver la connerie).

Quand on se respecte on fait tourner un SWAG ou un traefik et on fait tout propre avec du reverse proxy

**Dross** · 21/10/2022, 19h21

Pour du dev ? wtf ?

**Wobak** · 21/10/2022, 19h27

Envoyé par Dross

Pour du dev ? wtf ?

Parce que ta prod elle va pas listen sur port 5800 ou 5900, donc s'entrainer à avoir un environnement équivalent que tu peux push sur plusieurs environnements, c'est plutôt bien je trouve

**Dross** · 21/10/2022, 22h06

Ça dépends, avec un reverse proxy j'écoute sur ce que je veux et c'est justement le cas de tout mes déploiements, donc c'est pas incompatible non plus.

Après l'idée principale c'est qu'un dev qui veux bosser sur des ressources n'a pas envie d'apprendre et de gérer les débilitées liées à ces ressources, c'est pas son rôle et ça n'apporte rien. Donc trouver un juste milieu entre l'installation en dur et l’extrême inverse (les orchestrateurs type Kubernetes et plus).

De ce coté là, docker-compose réponds bien à ce besoin pour moi. Pour des déploiements simplifiés aussi. Pour plus compliqué ça ne tiens pas la route par contre, en effet.

**deathdigger** · 21/10/2022, 22h27

Envoyé par war-p

Tu utilisais autre chose?

Un peu de svn et sinon, rien. Les fichiers stockés en local et chez les clients. Après, je ne suis pas dev web (et pas vraiment dev tout court).

**Wobak** · 21/10/2022, 23h44

Envoyé par Dross

Ça dépends, avec un reverse proxy j'écoute sur ce que je veux et c'est justement le cas de tout mes déploiements, donc c'est pas incompatible non plus.

Après l'idée principale c'est qu'un dev qui veux bosser sur des ressources n'a pas envie d'apprendre et de gérer les débilitées liées à ces ressources, c'est pas son rôle et ça n'apporte rien. Donc trouver un juste milieu entre l'installation en dur et l’extrême inverse (les orchestrateurs type Kubernetes et plus).

De ce coté là, docker-compose réponds bien à ce besoin pour moi. Pour des déploiements simplifiés aussi. Pour plus compliqué ça ne tiens pas la route par contre, en effet.

Je pense qu'on diffère d'opinion probablement sur le "c'est pas son rôle et ça n'apporte rien"

Je pense que ça ne coûte pas très cher en travail mental d'apprendre ces choses là, pour que le jour où tu dialogues avec l'ops qui s'occupe de toi, y'ait une considération et un respect réciproque

**Dross** · 22/10/2022, 00h53

Oui et non.

Bon déjà ça dépends la structure : on est une startup, avec un temps assez long tu fini par toucher à tout, et on n'a pas le luxe d'avoir des gens mono-tâche (je suis fullstack desktop et web, développement front et backend, m'occupe de l'admin sys et du café) je ne vois donc pas le fait de s'intéresser à différents domaines d'un mauvais œil.

Mais quand je veux qu'un jeune travaille sur un truc, je ne veux pas le voir perdre du temps sur quelque-chose qui n'est pas critique tout de suite : s'il n'est pas déjà en difficulté c'est que ce que tu lui donne est trop facile, je préfère le voir bûcher sur ce que je considère important à ce moment là. Donc oui, si je veux qu'il s'applique sur l’architecture, les tests, un code propre et respectant les bonnes pratiques (inversion de contrôle, respecte l'open/closed principle, etc) je préfère qu'il ai de quoi travailler de manière autonome rapidement.

Surtout chez nous où on pilote souvent des projets de recherche avec l'industrie où il y a plus de défis que de temps pour les réaliser.

**war-p** · 22/10/2022, 11h03

Envoyé par deathdigger

Un peu de svn et sinon, rien. Les fichiers stockés en local et chez les clients. Après, je ne suis pas dev web (et pas vraiment dev tout court).

Ok, c'était juste pour savoir. Git c'est un super outil quand on a compris à quoi ça sert et comment ça marche. Mais ça fait parti des choses à connaître à côté.(comme docker

)

**deathdigger** · 22/10/2022, 14h43

Envoyé par war-p

Ok, c'était juste pour savoir. Git c'est un super outil quand on a compris à quoi ça sert et comment ça marche. Mais ça fait parti des choses à connaître à côté.(comme docker

)

Oui, j'en suis conscient

Docker, je suis intrigué, notamment pour voir comment ça tourne par rapport à la virtualisation d'apps que j'avais vu chez Vmware il y'a longtemps. Mais c'est comme tout, ça demande du temps pour se pencher dessus.

**war-p** · 23/10/2022, 11h59

Ben déjà, c'est pas de la virtualisation comme vmware

C'est beaucoup plus léger. (Le démarrage d'une appli est instantanée) et l'emprunte mémoire est largement réduite. De plus les images docker, c'est comme les cartes Pokémon, c'est prévu pour être facilement échangeable.

**raaaahman** · 23/10/2022, 15h22

En effet, plus la config est rare, plus tu peux vendre ton image cher.

**Fastela** · 24/10/2022, 13h57

Docker c'est formidable, mais quand ça plante t'es dans le premier cercle de l'enfer.

Discussion: Design & Développement web - Le topic des canards qui mangent des cookies

Outils de la discussion

Règles de messages