Discussion :

[pito2901]

Bonjour,

Après plusieurs heures de recherche sur le net, je cherche à créer un formulaire ou un moteur de recherche multicritère afin que celui-ci m'amène à un ou plusieurs produits respectant les critères choisis auparavant.

Je souhaite d'abord savoir si un tel projet est réalisable SANS utiliser le langage PHP → juste HTML, CSS et JAVASCRIPT ?

Si oui, seriez-vous disponible à m'aider ? (sans jugements svp )

Merci d'avance.

[michel.souris]

...je cherche à créer un formulaire ou un moteur de recherche multicritère afin que celui-ci m'amène à un ou plusieurs produits respectant les critères choisis auparavant...

Dans quoi sont stockés les produits ?

[pito2901]

En réalité, je n'en ai aucune idée, j'utilise la plate-forme Blogger, dans laquelle je crée mon site.

Je vais expliquer clairement ce que je souhaite :

Le site est construit pour accéder à ce fameux formulaire qui proposera plusieurs choix :

carte mère, carte graphique, alimentation, ventilateur CPU, processeur (je ferai cela sous forme d'un menu dans lequel on cochera les cases correspondantes aux critères de sélection)

Le formulaire vous amènera à un ou plusieurs boîtiers PC compatible(s) avec les choix effectués dans le formulaire.

Donc les produits sont les boîtiers PC...

EDIT: Voilà un début : CODE SOURCE

Il faudra également stocker les valeurs des boîtiers PC quelque part (la valeur de la carte graphique, de la carte mère, etc...)

Si je ne suis pas assez clair, faites moi signe svp. Merci.

[michel.souris]

Je ne vois pas comment faire ça simplement sans passer par une base de données... et du PHP ou un autre langage coté serveur.

[pito2901]

Pouvez-vous être plus précis svp ?

[Paul TOTH]

Pour faire cela en pur Javascript, il faut embarquer toutes les données dans la page (ou dans des fichiers scripts).

une variable JSON du type

Code :

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

1
2
3
4
5
6
7
 
var configs = {
  'MSI GE70' : {
    'gpu' : 'nVida',
    'cg'  : 'GeFoce GTX 660M / 2Gb GDDR6'
  }
}

peut contenir toute la base de données, il "suffit'" ensuite de gérer que quand on clique sur les checkbox carteG la liste résultat est recalculée d'après la variable configs.

De façon un peu plus lourde (en terme de taille du fichier), il est aussi possible de mettre en HTML toutes les données en ajoutant des critères de sélection

Code :

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

1
2
3
4
 
<table>
<tr><th>Nom</th><th>Carte graphique</th></tr>
<tr data-gpu="nvidia"><td>MSI GE70</td><td>GeFoce GTX 660M / 2Gb GDDR6</td></tr>

dans ce cas le code JS va parcourir le tableau et tester les attributs data-* pour savoir si la ligne doit être affichée ou non (display: none), ici data-gpu indique le type de carte graphique; si on ne veux pas les nvidia on lui collera une class "hidden" qui fait correspond à un display:none

[SpaceFrog]

Ce serait eventuellement réalisable sur une pseudo base de données de fichiers textes ( csv ou json ) attaqués en ajax.
Mais bonjour la maintenance ...

[michel.souris]

Traiter les relations de compatibilité depuis un fichier plat.... paye ta galère ! mais effectivement si vous êtes TRES à l'aise en javascript vous pourriez envisager d'attaquer une "base" csv, json ou, peut-être plus pratique et performant, sqllite (mais ça implique d'avoir des connaissances en SQL....)

[pito2901]

Merci pour toutes vos réponses !

Malheureusement je débute dans le développement Web, et j'ai quelques notions de javascript.

Si je reprend le message de Paul, il me dit comment faire la base de données → mais comment afficher la page de résultats ?
Faut-il faire une page avec tous les boîtiers à la suite puis suivant les critères de sélection, le javascript masque les boîtiers incompatibles ?

Pour en revenir à son code d'exemple, qu'est-ce que cela donnerait sur le codepen que je fourni plus haut ?

[Spartacusply]

Pour ce qui est du tri et de l'affichage, ce n'est pas le plus compliqué, il y a un tas de plugin javascript/jquery pour faire de la recherche multicritère (https://www.google.fr/#q=plugin%20ja...ticrit%C3%A8re).

Après, pour les données, c'est clair qu'il paraît logique (et également simple) de les stocker dans une bdd. Si tu ne le souhaites vraiment pas (après si c'est juste pour une question de compétence, ça me paraît assez illogique étant donné que ce sera de toutes façons plus compliqué de faire sans), tu peux toujours tenter de passer par un fichier "CSV" ou JSON, mais ce sera pas de la tarte...

[pito2901]

Mais il n'est pas dit plus haut que la base de données peut être stockée dans le javascript ?

[SpaceFrog]

non

[Spartacusply]

Javascript étant un langage, je vois mal comment on pourrait "stocker des données dans un langage" (ça veut pas dire grand chose...).

Dans un tableau JSON à la limite (et c'est ça qui a été dit plus haut), mais bien prendre en compte que c'est difficilement maintenable en tant que tel....

[pito2901]

Bien alors pouvez-vous m'expliquer étape par étape en DÉTAILLÉ sur : comment faut-il s'y prendre pour créer ce fameux fichier "CSV" pour pouvoir l'exploiter ensuite, merci.

[SpaceFrog]

Et la facture on l'envoie à qui ?
Accessoirement nous ne sommes pas la pour faire le travail à ta place

jette un oeil sur les tutos ajax du forum, il y a tout ce qu'il faut

[Spartacusply]

Bien alors pouvez-vous m'expliquer étape par étape en DÉTAILLÉ sur : comment faut-il s'y prendre pour créer ce fameux fichier "CSV" pour pouvoir l'exploiter ensuite, merci.

Non, et mettre un smiley ne changera rien, on est pas là pour faire le boulot à ta place.

Par contre, note bien que dans TOUS les cas, tu devras passer par un langage serveur (il n'y aura donc pas que du html, css, javascript).

[Paul TOTH]

Bien alors pouvez-vous m'expliquer étape par étape en DÉTAILLÉ sur : comment faut-il s'y prendre pour créer ce fameux fichier "CSV" pour pouvoir l'exploiter ensuite, merci.

pour faire un fichier CSV c'est facile, n'importe quel tableur (Excel, Calc...) permet d'enregistrer le document en CSV...par contre c'est pénible à exploiter en web.

et pour nuancer les autres réponses

1) comme le fait TiddlyWiki il est possible de tout faire dans une seule page web...bien que ce soit un Wiki et non une bdd

2) le fichier JSON (qui est donc du Javascript) peut être généré par exemple en PHP d'après une base de données MySQL, c'est ce que je fais pour un client dont le site web propose une sélection de produits en petit nombre, la page web exploite alors directement le fichier JSON au lieu d'interroger le serveur à chaque changement de critères.

En fait le critère déterminant est le nombre d'enregistrement concernés ... et le public visé, car après tout avec un bon PC on peut charger une énorme page web au besoin.

Pour le reste, quelques recherches google donne des pistes construire un tableau html en javascript, histoire de créer un tableau d'après les données JSON

Ou encore parcourir les lignes d'un tableau en javascript pour changer la classe des lignes à cacher.

[pito2901]

Et la facture on l'envoie à qui ?
Accessoirement nous ne sommes pas la pour faire le travail à ta place

Non, et mettre un smiley ne changera rien, on est pas là pour faire le boulot à ta place.

Ah ! Et bien on reconnait bien les membres du forum lorsqu'on le demande les bases pour débuter...

pour faire un fichier CSV c'est facile, n'importe quel tableur (Excel, Calc...) permet d'enregistrer le document en CSV...par contre c'est pénible à exploiter en web.

et pour nuancer les autres réponses

1) comme le fait TiddlyWiki il est possible de tout faire dans une seule page web...bien que ce soit un Wiki et non une bdd

2) le fichier JSON (qui est donc du Javascript) peut être généré par exemple en PHP d'après une base de données MySQL, c'est ce que je fais pour un client dont le site web propose une sélection de produits en petit nombre, la page web exploite alors directement le fichier JSON au lieu d'interroger le serveur à chaque changement de critères.

En fait le critère déterminant est le nombre d'enregistrement concernés ... et le public visé, car après tout avec un bon PC on peut charger une énorme page web au besoin.

Pour le reste, quelques recherches google donne des pistes construire un tableau html en javascript, histoire de créer un tableau d'après les données JSON

Ou encore parcourir les lignes d'un tableau en javascript pour changer la classe des lignes à cacher.

En revanche, merci pour ta réponse. Mais qu'entends-tu par "c'est pénible à exploiter en web" ?

Sinon, je vais regarder tes autres réponses... (Merci et +1)

EDIT : Qu'est-ce qu'un wiki, j'ai trouvé cela mais en quoi ça m'aidera ? C'est pour la mise en page du tableau ?

Et je ne comprends pas très bien le rôle du JSON... Il sert à chercher les informations de chaque boîtier (pour mon cas) puis en fonction des critères, il les sélectionnera ? Quel est le rôle du tableau ? Que faut-il y mettre ?

[Paul TOTH]

Ah ! Et bien on reconnait bien les membres du forum lorsqu'on le demande les bases pour débuter...

On reconnait aussi les gens qui ont un métier, j'ai pour habitude de donner de conseils gratuits depuis de nombreuses années sur le net, mais je suis aussi un prestataire de services, je ne te donnerais pas non plus une solution complète qui représente un travail à rémunérer.

En revanche, merci pour ta réponse. Mais qu'entends-tu par "c'est pénible à exploiter en web" ?

JSON est un format de donné natif Javascript, CSV ne l'est pas, c'est aussi bête que ça

Sinon, je vais regarder tes autres réponses... (Merci et +1)

EDIT : Qu'est-ce qu'un wiki, j'ai trouvé cela mais en quoi ça m'aidera ? C'est pour la mise en page du tableau ?

un Wiki c'est un site permettant d'éditer des articles en ligne, comme Wikipedia par exemple, ça n'a aucun rapport avec ton problème si ce n'est que TiddlyWiki est un Wiki qui tient dans une seule page web capable de s'auto enregistrer sur disque ou sur un serveur...il ne s'appuie donc sur rien d'autre que la page elle-même, ce que tu sembles vouloir faire.

Et je ne comprends pas très bien le rôle du JSON... Il sert à chercher les informations de chaque boîtier (pour mon cas) puis en fonction des critères, il les sélectionnera ? Quel est le rôle du tableau ? Que faut-il y mettre ?

Que connais tu du Web ? comment penses-tu afficher ta sélection ? un tableau me semble être une bonne solution. Soit il est construit dynamiquement en Javascript d'après une "base de données" JSON, soit il est préexistant et les critères de sélection permettent d'en cacher certaines lignes (cf les feuilles de style).

[sekaijin]

il existe WebSQL en HTML5 mais attention au support par les navigateur

le principe à l'ouverture de la page vérifier que la base existe
si oui l'ouvrir sinon la créer.
lors de la création importer les données via AJAX

pour la suite la page peut fonctionner online ou off line
lAPI WebSQL permet de faire des requête dans la base.

Attention cela implique que toutes les données sont copiées dans la base.
du coup pour la maintenance il faut être très vigilant en effet chaque client à une copie locale sur son poste de la base.

le plus simple pour maintenir la cohérence est lors de l'ouverture de vérifier que la base est à jour (via un timestamp) et sinon de demander au serveur les modifs à effectuer.

c'est envisageable pour une base en consultation. par exemple une appli catalogue pour un commercial.
de cette façon il n'a pas besoin d'être connecté pour le consulter.

C'est plus difficile si la base doit être modifiée car il faut alors mettre un oeuvre un mécanisme de re-synchro ce qui est plutôt ardu.

A+JYT