Comment développer cette application en PHP ?

a marqué ce sujet comme résolu.

Bonjour ! :)

Ce sujet est en quelque sorte une suite à mon précédent sujet dont voici un résumé : Je sais développer des applications avec VueJS sans aucun problème, mais je suis en réalité incapable de développer la même chose sans passer par un Framework Frontend.

Voici un résumé d’une potentielle application que je saurais développer avec Vue, mais pas en passant par un côté serveur uniquement.

Pour commencer, une image :

X - 1.png
X - 1.png

Dans cette belle maquette réalisée par un des meilleurs expert UI/UX Designer, voici ce que pour comprendre :

C’est une page de commande. Le client à, pour commencer, le choix de trois articles (mais ça doit pouvoir être variable selon la commande) prédéfinis. Il peut dire si oui où non il veut cet article en cochant/décochant une case. Il n’a pas le choix du nombre qu’il en veut : Il peut juste dire si il en veut ou pas.

Ensuite, on va passer à la troisième partie, les "Articles supplémentaires". Là, il y à une liste d’articles que le client peut ajouter à sa commande. Il peut dire si il en veut un ou plusieurs. Petite particularité, ces articles sont variables, c’est à dire qu’il peut choisir une banane courbée ou non courbée (oui, je me suis amusé avec les noms :D ).

Si le client ajoute une babane courbée, celle-ci s’affiche dans la liste des "articles supplémentaires ajoutés." Il peut bien sûr ajouter encore des bannane courbées pour que simplement le compteur 1x augmente ou ajouter des banane non courbée en plus des banane courbée.

Bref, un truc assez simple à développer avec Vue. Avec ce Framework, j’aurais simplement des "data" qui contient la valeur des checkbox pour mes articles prédéfinis, plus un Array qui contient les articles supplémentaires ajoutés ainsi que le nombre.

Toujours avec Vue, au clic sur un bouton "Ajouter", ça appellerais une méthode qui fait simplement un "push" dans mon tableau, et la liste des articles ajoutées serait automatiquement mis à jour.

Une fois le bouton "Commander" cliqué (il n’apparaît pas dans la maquette), alors je fait simplement un appel API sur le backend pour créer la commande.

Donc quelque chose d’assez simple et rapide à réaliser avec un Framework Frontend.

Mais voilà, l’objectif ici, c’est de développer la même chose avec PHP.

Pour le moment, j’avoue ne pas avoir essayer de le faire (mais je vais le faire). Comme je n’ai pas beaucoup de temps pour me lancer dans mes essais, je suis pour le moment dans une optique de réfléchir à comment faire.

Pour les articles supplémentaires, j’imagine qu’il faut utiliser les sessions. Une fois le bouton "Ajouter" cliqué, ça redirige en POST sur la route /articles/add/:id, ajoute dans la session l’article, puis redirige vers la page précédente, qui va alors récupérée la session pour afficher la liste.

Mais voilà, non seulement je ne suis pas sûr de si c’est bien comme ça qu’il faut faire, mais en plus, ça risque d’effacer la selection des articles prédéfinis.

Ensuite, si l’utilisateur quitte la page et reviens plus tard, comme les articles supplémentaires sont était mis en session, ça va les réafficher quand il va revenir, alors que j’aimerais repartir de zéro.

Bref, maintenant que je suis passé sur Vue, j’ai complètement oublié comment on développe une application sans Framework Frontend. Et ça me pose un problème.

Pouvez-vous, sans pour autant me donner la réponse ni un code tout prêt (parce que j’aimerais quand même le faire moi-même), me donner au moins la logique pour développer ce genre d’application ?

J’aimerais éviter les outils tels que Livewire, puisque c’est assez spécifique à une techno, et ça reviens à utiliser un Framework (en quelque sorte). Par exemple, si j’arrive à développer ça avec Laravel, le but et que je puisse le faire peut importe la techno, que ce soit avec Django en Python ou Ruby on Rails en Ruby.

Merci ! :)

+0 -0

Hello,

Détailler le développement d’une application backend PHP de A à Z est de l’ordre du cours ! Donc impossible de te répondre avec un message tant il y a de choses à présenter.

Mais ça tombe bien, tu es inscrit sur le site. Tu as donc accès aux cours en beta, et notamment le cours sur PHP.

Bon courage dans ton apprentissage.

Vu la structure il serait plus simple de ne pas tenir compte de l’affichage des articles en plus (qui n’est que de l’ordre de l’affichage et pas lié aux données à entrer).

Tu te retrouves donc avec un formulaire pas super standard mais pas trop complexe non plus :

  • Une partie pour les articles de base à sélectionner (avec des checkbox) donc
  • Plusieurs lignes avec les autres articles (article + variation + quantité) qui sont en gros une boucle

Il faut donc déjà commencer par trouver la structure HTML pour gérer tout ça, sachant que tu ne peux pas imbriquer les formulaires (c’est un seul à la fois en HTML).

La validation des articles custom pour les afficher est au final surtout de l'amélioration progressive qui peut être faite en JS (voire côté serveur si tu veux absolument une version fallback sans JS).

Sachant que côté serveur tu peux ne traiter qu’une partie du formulaire si besoin, par exemple en donnant des noms différents à tes submit.

Je te conseille donc de voir comment tu ferais ça en HTML pur, pour avoir une structure valide, ensuite tu pourras afficher un dump brut des données côté serveur pour voir à quoi ça ressemble. :)

Ça c’est extrêmement orienté front-end. PHP n’agit pas du coté du navigateur, donc chaque action doit être envoyée au serveur et le bon rendu doit être mis à jour.

Par exemple, à chaque action, tu mets à jours les datas dans le back-end et tu réactualises toute la page. C’est simple mais pas optimiser. Il faudrait rajouter un peu de JS pour réactualiser que la bonne page et faire des requêtes AJAX plutôt que des requêtes form.

+0 -0

@viki53 En fait, ce n’est pas vraiment le HTML le problème. Boucler pour afficher quelque chose est très simple. C’est surtout la partie données et comment gérer l’ajout d’un article supplémentaire.

Mais je me dit qu’en fait, c’est juste une sorte de panier un peu spécial.

@ache Tu veut dire que par le fonctionnement même de ce système, c’est quelque chose qui à été pensé en premier pour du JS, et que si j’avais du partir sur du PHP ou autre, j’aurais du créer une interface et une utilisation différente ?

Car oui, je sais que PHP, comme Python ou Ruby n’agissent pas côté navigateur. Mais justement, la question est de savoir comment faire sans passer par la partie navigateur.

Si je comprend bien, ce que je dois faire, c’est ajouter du JavaScript qui va faire un appel Ajax pour ajouter un article supplémentaire dans une sorte de panier. Là, je pense à une solution :

Le client clique sur le bouton "Ajouter au panier", ça ajoute simplement un champs de formulaire caché dans le HTML qui contient les données de l’article sélectionné. Comme ça, quand l’utilisateur va commander, je peux récupérer ces données pour créer la commande. Mais j’ai l’impression que c’est du bricolage.

+0 -0

Oui, c’est ce que je me suis dit. Mais je me demande si il existe des micro frameworks. En gros, développer une app entièrement en PHP, et y ajouter une partie "Micro Framework" sur certaines parties.

J’ai vu Preact, on dirais un React ultra léger. Faut juste que je vois comment on peut lier les données de Preact avec celles du serveur. Je me dit que le plus simple, c’est que Preact créer dynamiquement un formulaire en HTML qui sera envoyé une fois le clic sur le bouton "Valider la commande".

Edit : Ou plutôt des outils tel que InertiaJS.

+0 -0

Je ne comprend pas.

Tu sais le faire. Tu as conscience qu’une partie nécessite JS et n’est pas reproductible sans. Quel est le problème donc ?

Que ce soit VueJS, Svelte, Preact, React ou Angular, ça reste la même chose au final, c’est un framework. (Framework ”léger” pour Svelte et Preact)

+1 -0

Je ne comprend pas.

Tu sais le faire. Tu as conscience qu’une partie nécessite JS et n’est pas reproductible sans. Quel est le problème donc ?

Que ce soit VueJS, Svelte, Preact, React ou Angular, ça reste la même chose au final, c’est un framework. (Framework ”léger” pour Svelte et Preact)

ache

Je crois que je me suis mal exprimé.

L’idée, c’est de pouvoir reproduire la maquette en utilisant un framework backend, que ce soit Laravel en PHP, ou Django en Python (ou autre, on s’en fiche en fait), sans utiliser de framework frontend comme Svelte, Vue, Angular, React, ou que sais-je encore.

Quand je parlais de Preact, c’était pour réagir au message de viki avec comme pensée "Peut être que la maquette à été pensée pour être reproduite avec un framework forntend, et que si je ne devais pas en utiliser, j’aurais du créer une maquette différente qui s’adapte mieux à une techno non JS".

Et donc, qu’au vu de la maquette, un framework frontend deviens obligatoire (enfin, rien n’est vraiment obligatoire, mais vous voyez ce que je veux dire).

La question que je me pose au final, c’est est ce que la maquette est vraiment orientée framework frontend, et qu’elle aurait due être différente si je n’avais pas du en utiliser un ?

Bien entendu, je ne suis pas contre un peu de JS. C’est ce que fait ZdS, par exemple sur les boutons "+1 / -1" qui ne rechargent pas toute la page. Avoir du JS par-ci par-là augmente l’expérience utilisateur. Mais là, dans mon exemple, ce vraiment un système dynamique, très différent d’un bouton "+1 / -1".

+0 -0

Bien entendu, je ne suis pas contre un peu de JS. C’est ce que fait ZdS, par exemple sur les boutons "+1 / -1" qui ne rechargent pas toute la page. Avoir du JS par-ci par-là augmente l’expérience utilisateur. Mais là, dans mon exemple, ce vraiment un système dynamique, très différent d’un bouton "+1 / -1".

FougereBle

Ça reste une page à vue dynamique (dynamique client) donc difficile de se passer de JS pour le coup. Après, tu peux. Si j’ai la foi, je ferais un exemple à base de Flask (Python), ça ne sera pas.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte