Discussion :

[Christophe Charron]

Bonjour toutes et tous.

Je sollicite votre regard de développeur web en php/javascript/css.
J'ai déjà posté ce message dans le forum php, mais je n'ai eu qu'un seul retour alors je tente ma chance ici et je la tenterai vraisemblablement également dans le forum CSS

Afin de préparer ma retraite, j'essaie de compléter ma bibliothèque de certains livres manquants dans des séries. Mais ma mémoire me fait défaut, et je n'ai plus tous les titres en tête, surtout ceux lus il y a plus de 45 ans...Donc je suis en train de l'informatiser afin d'avoir rapidement une vue de ce que j'ai et de ce que j'aimerais avoir.
Mais cela fait 15 ans je n'ai rien codé dans ces langages, alors j'aimerais avoir vos avis, conseils sur ce qui se fait maintenant, par rapport à ce que j'ai écrit, avant de continuer à développer le petit site que je projette d'exploiter qui est visible ici https://bacasable.christophe-charron.xyz/

Le contexte :
Pour les données : une base de données Mariadb, en innodb, avec quelques colonnes Json.
Programmation "à la mano", en procédural, avec Visual Studio Code, alors que jadis j'utilisais sublimetext.
Pas persuadé que ce soit mieux, mais le lien avec git me semblait très simple à mettre en place. Autre parti pris, aucune bibliothèque, aucun objet venant de l'extérieur pour ne pas être dépendant. Il faudrait vraiment qu'il y ait un objet qui fasse "papa-maman", en plus du café et sache servir la gnole à la bonne température pour me décider à l'utiliser.
Le domaine avec je suis le moins à l'aise est la CSS qui part en vrille dès que je fais évoluer les objets (le séparateur vertical qui fonctionnait dans le script d'associations jusqu'à ce que j'ajoute le réceptacle des tags au-dessus... etc).
Le code est visible ici https://github.com/xofxon/bacasable_bibliotheque

D'avance, merci d'y jeter un œil et de me faire part de vos commentaires.

[Toufik83]

Bonjour,

Donc votre problème est lié seulement au CSS ? quels sont les problèmes que vous rencontrez avec CSS?

Ou bien vous voulez reconstruire tout le site avec un code PHP/JS/CSS plus récent ?

Déjà pour organiser les tableaux HTML, il existe un plugin jQuery DataTable avec pleins d'options (tri, recherche, pagination, déplacement et visibilité des colonnes etc ...)

Pour pouvoir l'utiliser, il faudrait d'abord importer la bibliothèque jquery en mettant son lien dans l'attribut src de la balise <script></script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"></script>

Puis après importer encore deux fichiers, le premier est le script JS de DataTable et le deuxième est le CSS.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
//le JS
<script src="//cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>
//et le CSS
<link href="//cdn.datatables.net/2.1.8/css/dataTables.dataTables.min.css" rel="stylesheet" />

Dès que vous importez ces trois fichiers, vous êtes donc prêt à utiliser le plugin et l'initialiser comme suite :let table = new DataTable('#ID_De_La_Table');
Si vous ne voulez pas utiliser les liens en ligne, vous pouvez les enregistrer localement, comme ça vous n'aurez plus besoin d'internet pour exécuter votre site.

[Christophe Charron]

Bonjour et merci pour ces conseils.
Je vais regarder cet objet, mais j'avoue qu'en voyant le nombre de post sur le forum, je crains qu'il soit complexe à customiser. Ou alors il est destiné à des personnes qui ne savent pas programmer ?
En tout cas plus complexe qu'en gardant la main sur la globalité du code.
Qu'entendez-vous par "code PHP/JS/CSS plus récent" ?

[Mat.M]

bonjour il faut éviter de coder en "dur" c.a.d. taper du code du genre bouton.affiche("voulez-vous quitter ?")
Parce que si vous faites une appli multi-langue il faut tout reprendre code.
Et puis je trouve qu'il n'y a pas assez d'abstraction dans le code.

[Toufik83]

Bonjour,

C'est normal si vous croyez que le code est complexe vu que c'est la première fois que vous allez l'utiliser, mais c'est seulement du JS avec la syntaxe jQuery, et je pense qu'il existent d'autres plugins qui font la même chose sans jQuery (seulement avec la syntaxe de Vanilla JS) comme par exemple Bootstrap_DataTable.

Qu'entendez-vous par "code PHP/JS/CSS plus récent" ?

Mais cela fait 15 ans je n'ai rien codé dans ces langages

Les langages de programmation ont évolués depuis ce temps là (15 ans).., comme par exemple PHP été en version 5 et maintenant on est à V8, et donc certaines fonctions sont devenu obsolètes qu'il ne faut plus utiliser, JS aussi à intégré de nouvelles fonctionnalités comme les fonctions fléchées par exemple...

Ce que je veux dire c'est que vous êtes obligé de convertir votre code en versions récentes afin de garantir la performance et l'expérience aux utilisateurs.

bonjour il faut éviter de coder en "dur" c.a.d. taper du code du genre bouton.affiche("voulez-vous quitter ?")

Comme Mat.M l'avait mentionné dans sa réponse, cet outil à été spécialement préparé pour les personnes qui savent programmer et qu'ils ont soit

• Marre de la répétition de code à chaque fois qu'ils veulent gérer l'affichage de données dans un tableau HTML (pour ce cas)
• La possibilité d'utiliser le mode serverSide pour gérer un nombre de données important de la base de donnée (par exemple si vous avez plus que 1000 lignes enregistrées...)

Le mode serverSide garantit la performance et la rapidité d'affichage, car si vous avez des milliers de lignes enregistreés dans la BD et que vous voulez les afficher toutes à la fois, il est bien possible que le chargement soit beaucoup plus lent et nuit donc à l'expérience des utilisateurs, ce qui fait que ce mode permet de sélectionner seulement les données qui doivent être affichés (de la page en cours)

Bref, on vous a préparé une bonne interface interactive avec l'utilisateur mais c'est à vous de l'alimenter avec les données.

De toute façon ne vous inquiétez pas, commencez d'abord l'initialisation et si vous rencontrez des problèmes revenez ici pour qu'on essaie de vous aider.

[Christophe Charron]

bonjour il faut éviter de coder en "dur" c.a.d. taper du code du genre bouton.affiche("voulez-vous quitter ?")
Parce que si vous faites une appli multi-langue il faut tout reprendre code.

Bonjour.
Oui, vous avez raison, dans l'absolu. Comme je l'écrivais en préambule, c'est pour une utilisation personnelle, donc je ne me suis en effet pas soucié de cet aspect. Mais je vais déporter les libellés et autres éléments textuels dans deux fichiers (un "fr.php" et un "en.php") contenant un tableau de textes que je chargerai en fonction de la langue d'utilisation.

Et puis je trouve qu'il n'y a pas assez d'abstraction dans le code.

Qu'entendez-vous par là ?

[Christophe Charron]

Bonjour

Bonjour,

C'est normal si vous croyez que le code est complexe vu que c'est la première fois que vous allez l'utiliser, mais c'est seulement du JS avec la syntaxe jQuery, et je pense qu'il existent d'autres plugins qui font la même chose sans jQuery (seulement avec la syntaxe de Vanilla JS) comme par exemple Bootstrap_DataTable.

Oui, je comprend. Simplement, je ne vous pas la valeur ajoutée dans mon cas d'utilisation.

Les langages de programmation ont évolués depuis ce temps là (15 ans).., comme par exemple PHP été en version 5 et maintenant on est à V8, et donc certaines fonctions sont devenu obsolètes qu'il ne faut plus utiliser, JS aussi à intégré de nouvelles fonctionnalités comme les fonctions fléchées par exemple...

Ce que je veux dire c'est que vous êtes obligé de convertir votre code en versions récentes afin de garantir la performance et l'expérience aux utilisateurs.

C'est bien pour cela que je viens solliciter l'avis de personne pratiquant actuellement.
Mais, encore une fois, je ne vais pas basculer dans le "jeunisme" uniquement parce que c'est plus moderne, s'il n'y a pas de valeur ajoutée. Je suis un très gros flemmard et je considère que le Ctrl+C et le CRL+D devraient être bannis des IDE car tout ce qui est utilisé plus d'une fois devrait être factorisé (objet, procédural, on peut en débattre)

Comme Mat.M l'avait mentionné dans sa réponse, cet outil à été spécialement préparé pour les personnes qui savent programmer et qu'ils ont soit

• Marre de la répétition de code à chaque fois qu'ils veulent gérer l'affichage de données dans un tableau HTML (pour ce cas)
• La possibilité d'utiliser le mode serverSide pour gérer un nombre de données important de la base de donnée (par exemple si vous avez plus que 1000 lignes enregistrées...)

Le mode serverSide garantit la performance et la rapidité d'affichage, car si vous avez des milliers de lignes enregistreés dans la BD et que vous voulez les afficher toutes à la fois, il est bien possible que le chargement soit beaucoup plus lent et nuit donc à l'expérience des utilisateurs, ce qui fait que ce mode permet de sélectionner seulement les données qui doivent être affichés (de la page en cours)

Bref, on vous a préparé une bonne interface interactive avec l'utilisateur mais c'est à vous de l'alimenter avec les données.

De toute façon ne vous inquiétez pas, commencez d'abord l'initialisation et si vous rencontrez des problèmes revenez ici pour qu'on essaie de vous aider.

Je pense que le code actuel fait le job. Et entre créer n tables différentes, ce que s'écrit en peu de lignes de code comme vous l'avez vu dans mon code, ou paramétrer une table, en certainement aussi peu de lignes, je ne vois pas trop les avantages de la seconde méthode.
Mais je vais étudier ces pistes, ne serait-ce que par curiosité, à défaut d'utilité.

[mathieu]

Je suis un très gros flemmard

c'est une très bonne qualité en tant que développeur puisque ça vous pousse à faire du code plus efficace.

une autre question a se poser est aussi de vous demander sur quels prochains projets vous voudriez travailler (dans le sens technique et non le sens commercial). suivant vos projets, ça pourrait être intéressant de prendre du temps pour faire des tests avec des frameworks comme wordpress ou symfony. et ensuite l'expérience acquise vous permettra d'être plus rapide par la suite.

[Toufik83]

Bonjour,

c'est une très bonne qualité en tant que développeur puisque ça vous pousse à faire du code plus efficace.

Christophe Charron vous m'avez mal compris.

Je n'essaie pas de minimiser de vos efforts, vous avez fait un bon travail bravo, mais ça n'empêche pas de l'optimiser et l'améliorer encore plus, sinon et avec votre logique, le design et la performance de la BMW seraient toujours restés identiques à ceux de la Renault 4

Si vous êtes fainéant, le visiteur de votre site l'est aussi, et si par exemple

• Je veux voir la première/dernière ligne du tableau de la page bibliotheque_menu, vous m'obligez de rouler la souris jusqu'à le lendemain, et quand j'y arrive... paff la dernière ligne est verticalement moitié cachée, la même chose pour remonter...
• J'ouvre le site sur un appareil mobile (écran moins large), les colonnes ne sont pas responsive

voilà deux inconvénients que j'ai remarqué seulement sur une seule page...

[Mat.M]

Qu'entendez-vous par là ?

désolé je n'avais pas vu la question.
Si possible faire en Javascript des objets conceptuels et le plus génériques possibles.
Livre devient entité par exemple
Pour faire quelque chose de sophistiqué c'est bien de faire des classes qui utilisent le mécanisme d'héritage et donc héritent entre elles selon une certaine hiérarchie.
Ainsi ça évite les redondances et copier-coller.
L'idéal c'est un front-end en Javascript ou Php et en back-end des objets .Net ou bien Java