Aide pour projet système de contenu modifiable

Bonjour,

il manque beaucoup d'éléments dans la description du besoin que tu exprimes:

il insère les éléments (images,texte,vidéos), à des endroits fixe définit.

Qu'est ce que cela signifie?

Sur la page se trouve un genre de layout fixe avec les emplacements du texte, des images et des vidéos prédéfinis?
Du genre, un bloc texte ici, dessous 2 images, en haut à droite un icone, au milieu une vidéo, dessous un titre, dessous deux colonnes de textes, etc.. je dis n'importe quoi pour l'exemple.

Ou toute la page personnalisable est modifiable et donc les éléments peuvent se placer n'importe où sur cette page?

Par ailleurs,

images : Un système d'upload d'images? Comment sont-elles ensuite positionnées dans la page?
vidéos : Un système d'upload de vidéos? ou des liens vers des vidéos lu ensuite dans la page via un player flash ou autre?
css : Le client peut définir son propre css ? Dans ce cas, la page ne possède pas de position fixe pour des éléments?
js :QUID?

Ceci est pour la partie fonctionnelle.

En ce qui concerne l'aspect technique, largement tributaire des interrogations fonctionnelles cités ci-dessus:

Utilisation d'une base de données?
Tout le contenu de la page est déposé sous forme de fichiers html etc.. dans un endroit réservé à l'utilisateur sur le serveur?

Un mix des 2 ?
Quid de la sécurité? (javascript nauséabond , triche avec le référencement, droit d'accès à la modification?)

Pour t'aider sur l'aspect technique , il faudrait plus de détails fonctionnelles et des questions précises sur tel aspect du fonctionnement que tu veux mettre en place.

cordialement

Antho

Bonjour Antho07,

Ton exemple "Sur la page se trouve un genre de layout fixe avec les emplacements du texte, des images et des vidéos prédéfinis?
Du genre, un bloc texte ici, dessous 2 images, en haut à droite un icone, au milieu une vidéo, dessous un titre, dessous deux colonnes de textes, etc.. je dis n'importe quoi pour l'exemple. ", répresente exactement ce que je souhaite mettre en place.

Je t'envoie un aperçu du fonctionnement de l'application.

Texte du lien

Je ne sais pas comment faire pour récupèrer les informations saisies par l'utilisateur et surtout permettre à l'utilisateur d'insérer du contenu sur la page.

Pour ce qui est du côté technique:

Lorsque l'utilisateur valide sa page, elle est enrengistrée sur notre serveur.

L'utilisateur peut accèder à sa page et la modifiér à volonté.

Quel est le fonctionnement le plus optimisé pour realiser ce projet?

merci d'avance,

Cordialement,

Dunk

Salut, J'ai déjà voulu faire ce que tu as voulu faire tu as de la chance ;) En fait je te conseille d'utiliser JQuery et d'avoir une iframe de prévisualisation spéciale. Par exemple sur la iframe avec la classe previsu, tu charges le template sélectionné. En HTML : [code]Template médicalTemplate familialTemplate professionnelTemplate affectifValider<iframe src="template_defaut.html" id="previsu"></iframe>[/code] En JQuery : [code] var template = "defaut"; $('#template_medical').click(function() { template = "medical"; $('#previsu').attr('src', 'http://www.tonsite.fr/template\_medical.html'); }); $('#template_professionnel').click(function() { template = "professionnel"; $('#previsu').attr('src', 'http://www.tonsite.fr/template\_professionnel.html'); }); $('#template_familial').click(function() { template = "familial"; $('#previsu').attr('src', 'http://www.tonsite.fr/template\_familial.html'); }): $('#template_affectif').click(function() { template = "affectif"; $('#previsu').attr('src', 'http://www.tonsite.fr/template\_affectif.html'); }); $('#valider').click(fun[ction() { window.location = "http://www.tonsite.fr/modif.php?template=" + template; });[/code] Bon après c'est la base il faut déjà que tu intègres ça à ta page, que tu fasses un petit script php et pour l'édition directe par tes utilisateurs je te conseille de passer par ckeditor, mais en version inline, regarde ici : http://ckeditor.com/demo#inline En espérant t'avoir aidé, darkhexagon

Bonjour Dunkerque ,

Ce que tu décrits est plutôt l'aspect fonctionnel.

Cependant , il reste deux questions , pour comprendre la structure existante et préciser un peu .

Si j'ai bien compris, l'utilisateur choisit, avant la création de sa page, un template prédéfini dans une liste.

Comment sont stockés ces templates? en base?

Par ailleurs, une interrogation subsiste par rapport aux vidéos. Les vidéos que l'utilisateur peut placer dans sa page sont des vidéos externes aux sites déjà hébergées, style youtube, etc... ou alors des vidéos personnelles uploadés sur le site?

Sans gestion de vidéos, voici peut être une solution.

J'ai fait ça rapidement , ouvert a toute critique, j'ai surement loupé des contraintes...

Schema de base

diagramme de sequence

je tiens à préciser que ces diagrammes ne sont pas exacts par rapport aux normes uml etc... c'est juste une idée

Salut Antho07 et darkhexagon

Merci pour vos retours.

Concernant le système de template j'ai procédé un peu différemment.

Je m'explique: à la racine de mon site j'ai un controller index.php
qui appelle une page par default si aucune page n'est choisie, sinon ira faire une include de la page sélectionnée.

Je vais essayer de vous expliquer tout le concept technique de A à Z.

1. Le client se connecte à l'application.

2. Choisis une page d'exemple "réalisée par moi même", j'ajouterais différente pages d'exemple au fur et à mesure.

3.Insére le contenu par rapport à la structure de la page, exemple sur l'image ci-joint: Texte du lien, chaque pages ont leur propre structure.
Les clients peuvent uploader que des vidéos/photos personnelles directement depuis leur ordinateur, aucune système de lien sera mit en place pour le moment.

4.Une fois la page finalisées(les informations par default sont modifiées par le client), le client valide la page.

Nous voilà au côté technique.
Chaque thèmes/pages sont stocké(e)s dans un dossier sur mon serveur.

Les path sont insérés dans la bdd ainsi que le texte, les photos et vidéos sont eux insérées dans un dossier propre au client.

Chaque pages/génér(e)s seront modifiables à volonté uniquement sur l'application.

Ce qu'il faut savoir, c'est que chaque pages/thèmes ont des scripts nécessaire (js/php) au fonctionnement de l'application.

Les thèmes/pages des client ne doivent contenir ces scripts, mais uniquement le strict nécessaire c'est à dire une connection à la bdd pour les path des images/vidéos et texte, et un link rel du css "de la mise en page par default".

Si vous avez d'autre questions n'hésitez pas.

Vous remerciant par avance,
Cordialement,

Dunk

Salut!

En faite je crois que je n'ai absolument pas compris quel retour/aide Dunkerque attendais suite à son post et à son projet...

Je trouve en tout cas l'idée très bonne et la structure d'Antho07 très claire également.

Beaucoup de boulot en développement en perspective!!

Bonne continuation!

Salut Dunkerque,

De ce que j'ai compris de ton projet, je te conseillerais de t'orienter sur une conception MVC (Model, Vue, Controller) avec un framework (CakePHP, CodeIgniter, Laravel...).
L'avantage: l'architecture du site est plus propre, les framework te permettent d'utiliser des fonctions définis et d'éviter de multiplier les lignes de code et, surtout, ton utilisateur n'aura aspect qu'à du visuel. Le code de tes fonctions de recuperatoion d'iunfo dans la bdd étant lui contenu dans les controllers auquels l'utilisateur n'a pas accès.

Ensuite, côté utilisateur, c'est en faite simplement un Skin que tu proposes.
Pour chaque utilisateur tu enregistre le skin CSS préférer qui lui s'occupera et/ou la disposition de la vue en Html souhaité.
Avec le CSS tu gère la couleur, les fonds, la typographie.
Avec le Html tu gères les menus à droite ou à gauche etc...

Après, tou est question de programmation et la ça se complique si tu n'y connais rien... ;)

En faite c'est exactement ce que propose les sites de création de blog : tu choisis l'apparence que tu veux, ensuite les fonctionnalité (upload d'image/video, menu à droite ou à gauche, texte avec image...) reste les mêmes pour chaque utilisateur.

J'espère avoir pu t'éclairer et je te souhaite bon courage pour le développement.

A+

Bonjour B-Art,

En effet je propose des skin je dirais plus des modèles.
Pour le moment il y'a 4 modèles d'exemples avec différente thème "familial, medical, pro, relation".

Chaque modèles ont leur propre structures, c'est tout simplement une page html/css.

Les modèles sont modifiables à volonté aux endroits permis, les images/vidéos et texte sont les seuls choses que peuvent modifier un client"pour l'instant, je rajouterai des fonctionnalités plus tard".

Pour l'idée d'un framework ou système mvc, je verrai par rapport à l'avancé du projet pour le moment je veux me contenter juste du fonctionnement de l'application.

Si vous avez d'autre questions n'hésitez pas.

Vous remerciant par avance,
Cordialement,

Dunkerque

Bonjour,

c'est bien ce que j'avais compris concernant le fonctionnel.

Dunkerque,en ce qui concerne les frameworks côté serveur, je n'ai pas d'avis là dessus, clairement c'est toujours plus propre. Par contre pour gérer l'affichage pendant la création de la page, donc une prévisualisation, je pense qu'un framework du genre angularjs ou autre système de binding qui s'occupe de ce travail à la place du développeur permettra de gagner beaucoup de temps sur cette partie.

Quand à stocker les variables en base, c'est juste pour de la construction et faire en sorte qu"un nouveau template soit simple à ajouter:

Un nouveau template => template html + variables associées aux templates déclarés en base. Le reste suivra la mécanique tout seul.

L'aspect sql est peut etre un peu lourd, mais uniquement en phase de construction, une fois publié, il n'y a plus de requête en base.

Bonjour Antho07,

Pour l'édition de texte j'utilise jquery et le plugin jeditable, pour les images, vidéos en php (input=file, fonction moveuploadedfile etc.).
Pour le moment j'arrive à avoir un peu pret ce que je veux, cependant j'arrive toujours pas à retirer les script non nécessaire à la page personnalisée du client.

Je procède ainsi:

Si le bouton du formulaire existe:
je récupère les données(get,post etc..)
je crée un dossier avec comme nom l'id du client(session).
je copie le thème actuellement ainsi que les images,vidéos dans le dossier du client.
--Retirer les script inutile à l'affichage du modèle crée, le thème d'exemple ne doit pas être modifié--
j'envoies les nom de l'image, vidéos dans la bdd.(pour les path)
redirection sur le thème.

Pour le texte, avec le plugin jeditable je modifie en direct le texte et l'insere automatique ne bdd.

Si vous comprenez pas un point ou si vous avez des questions n'hésitez pas.

Vous remerciant par avance,

ps: je suis pas un lead en dev, je me débrouille.
Je veux faire le plus simple possible, il n'y aura pa de prévisualisation du thème cré.

Cordialement,

Dunk

le fait qu'il n'y ait pas de prévisualisation de la page en cours de création n'est-il pas contre ergonomique pour le client?

Lorsque que celui-ci voudra se rendre compte du résultat, il n'aura pas d'autre solutions que de valider,d'aller voir le rendu, de revenir si ça convient pas, de revalider etc.. ?

pour virer tes scripts, je vois pas comment est ta structure mais l'idée que j'avais c'était :

<div>
Page en cours de creations
</div>

<script>
Script ajouté concernant le modele angular lié a la vue

</script>µ

<script>
Script présent naturellement dans la page de creation
</script>

au clic sur valider, c 'est le contenu de la div qui est extrait de la page (code html) et placé un fichier entre balise <body> </body>

On rajoute l en tete du fichier, on ferme la balise html en bas et on a notre page internet personnalisée

Il n'y aura une prévisualisation, mais pas dans l'immédiat, je me concentre sur le fonctionnement de base de l'application.

Je vais essayé de te détailler la structure d'un thème:

exemple de la page theme1.php

<?php SCRIPT PHP ?>
<html>
<head>
<title></title>
<link rel="stylesheet" href="themes/css/content.php"> -> ce fichier appele le fichier .css et s'occupe de gérér la soumission du formulaire, traitement de donnée, insertion etc..
<script>
LES SCRIPT JS
</script>
</head>
<body>
<div id="content>
<form action="themes/css/content.php">la mise en page du theme1</form>
<input type="submit" value="envoyer">
</div>
</body>
</html>

Exemple de la page crée par le client:

page_personnalisée.php(contenant uniquement la connection à la bdd pour recupère les paths des images/vidéos et texte), pas de boutton envoyer, script js.

La page personnalisée doit être comme une page html/css tout simple.

mon arborescence: A la racine
index.php, 404.php, save.php(fichier lié au plugin jeteditable
dossier(css), dossier(fonts), dossier(img), dossier(includes, contenant le header et le footer), dossier lib(les differentes fonctions ->connection bdd etc.), dossier(js), dossier(themes)

dossier(themes) se présentent ainsi themes1.php, themes2.php, default_theme(page qui sera affiche si aucun thème n'est chargée) et le dossier(css) qui contient 2 fichier le fichier css pour le style des différents themes et content.php(qui lui s'occupe de la validation du formulaire).

Arborescence du dossier client une fois le thème crée:

dossier(id_80)->dossier(images), dossier(videos), page_personnalisée.php

Si tout cela n'est pas clair faites le savoir.
ps: je connais pas angular.js, et merci encore pour ton aide Antho07

Vous remerciant par avance,

Cordialement,

Dunk

Angular js est une librairie js permettant notamment de faire du binding.

Le binding est en faite un lien entre le visuel(la vue) et un objet javascript (le modèle).

Cela signifie que a tout moment lorsque que le modèle javascript change, la vue se recharge de manière dynamnique en fonction de ces nouvelles données. (il est aussi possible de faire un double binding, au sens ou une action sur la page peut mettre a jour le modèle automatiquement, ce qui aura pour conséquence de recharger les éléments de la vue avec ces nouvelles valeurs etc... )

Dans ton cas , cela peut être utile pour la prévisualisation :

Chaque endroit modifié est bindé sur un objet js.

Lorsque que l'utilisateur choisit de modifier ce paragraphe par exemple, une fois le paragraphe tapé (dans un formulaire par dessus la page par exemple), la donnée est sauvé dans la variable js bindé au paragraphe sur la page de prévisualisation et donc il apparaît.

Et donc ce qui t'embête ce sont les scripts??

la page personnalisé ressemble a quoi actuellement lorsqu'un visiteur arrive dessus?

C'est bien les script qui m'embête pourquoi l'utilisateur aurait par exemple les script de jetediable etc.., et puis je dois modifié à la main(le path de la bdd, je m'explique sur le theme j'inclue le path de cette manière: ..lib/db.php mais avec l'arborescence de la page personnalisée du client elle devient ../../lib/db.php).

Du coup si je rentre pas manuellement le path, la page personnaisée arrive pas à se connecter à la bd pour récupéré les path/infos.

Je t'enverrai une fois finalisée un screen de l’aperçu de cette page.

j'imagine que si je veux me collé ce système avec angular je devrais apprendre angular.js et change mon concept?

Actuellement je fonctionne avec le système d'inclusion de php recuperation du get et insertion du get s'il existe.

Des questions n'hésitez pas ,

Cordialement,

Dunk

bah vire les :

<?php if (on est en train de mdofier la page) :?>
<script>

...

</script>

<?php endif;?>

Sinon,
L'idée que j'avais au départ c'était de stocker les pages générés en tant que page physiques sur le serveur.

Les données en base ne servant qu'à reconstruire la page dans la but de la modifier.

Si tu veux j'aurais séparé l"environnement de construction : base + script + ... + ...

de celle d'execution

juste du code html statique.

Cela pour deux raisons:

• la page au final est statique (donc pourquoi avoir besoin de la reconstruire chaque fois?? )

• rapidité: fichier statique vs multiple requête et processus de construction en php ..

• les outils nécessaires a la construction d'une page uniquement dans une page servant de layout à la modification.

je ne veux pas te faire changer de système.

Bah vire les :

<?php if (on est en train de mdofier la page) :?>
<script>

...

</script>

<?php endif;?>

Vire les.

J'aimerai bien les virer mais je vois pas comment.
"L'idée que j'avais au départ c'était de stocker les pages générés en tant que page physiques sur le serveur"

Comment ça? je ne comprend pas trop là.

J'ai pas trop compris ton message(surement du à la fatigue :p)

Bah si ton système est plus optimisé simple et dynamique à mettre en place pourquoi pas se pencher dessus?

te remerciant par avance,

Cordialement,

Dunk

une autre solution est de stocker le contenu de la page en base, le contenu statique.

quand tu arrives sur la page personnalisée, tu prends un layout dans lequel tu mets le bon style css et dans le contenu la page récupéré depuis la base.

oui je voulais dire mettre tout ça sur un fichier sur le serveur (la page) mais ça peut aussi être dans un champ en base.

C'est du contenu statique.

en gros une fois la page produite il n'y a plus de php a l'interieur de la page personnalisé , on inclut juste de l'html.

Comment ça mettre tout le contenu de ma page en base?

mettre tous les balises etc..?

Je n'avais jamais pensé à ça.

La page personnalisée doit obligatoirement se connecter à la bdd pour recupere le contenu non?

Je crois que ton explication me semble trop high level(je suis bien fatigué pour comprendre là).

Si ça te dérange pas , je préfererais parler de mon projet autre que sur ce forum pour eviter de le flooder.

te remerciant..
Cordialement,

Dunk

je veux bien mais je peux pas t envoyer de message privée :s

Suite à quelques échanges avec Dunkerque. N'étant pas expert web , je sollicite votre avis sur la conception que j'ai proposé plus haut dans un post. Si Grafikart ou autres expérimentés dans le monde du web passent par là , leurs remarques seraient précieuses.

Je reprécise un peu les cinématiques pour comprendre.

Des templates sont préconçues avec dedans des binding angularjs préparés. Les nom des variables du scope contenant ces données sont également sauvé en base pour permettre de connaître toutes les variables de n'importe quel template.

Lors de la phase de création de page ou de modification de page, on réalise la concatenation des élements suivants:

1) Le bon css associé au template

2) Le template

3) une boucle php permet de générer un script js initialisant toutes les variables du scope avec des valeurs par Default si la page est nouvelle, ou les valorisants par les données contenues en base.

4) un script jquery est ajouté. il permet de cibler les éléments modifiables. Ces éléments sont identifiés par des attributs data-type(text, video, image) et data-nomVariable(correspondant au nom de la variable scope angular associé a cet élément).

Ce script permet ensuite lors du clic sur un élément d'ouvrir une popup dans laquelle un formulaire de modification de ce champ s'affiche:

text-> ckeditor ou autre
image,video ->iframe d'upload de media un peu comme le plugin media.

pour les images et les vidéos, un appel ajax effectue la sauvegarde coté serveur de ces éléments. L'utilisateur choisit une image ou une vidéo ensuite.

A la validation sur la popup, la valeur choisie (le texte html ou le lien de la vidéo ou image) est récupéré puis placer dans le scope . (+ $apply pour l'appliquer sur la page).

Une fois que l'utilisateur est satisfait de sa page, il sauvegarde:

• tous le modèle du scope contenant les variables est passé en json, envoyé en ajax cote php, puis sauvé en base.

• Si l’opération s'est bien déroulé, le code html généré par angular est récupéré et envoyé côté php . (le css est responsive)
  La deux choix: ou bien un script php ajoute a cela l entête , le css le body et en fait un fichier .html placé sur le serveur.
  ou le contenu est placé en base dans un champ et l'id Template permettra d'appliquer le bon css.

Finalement,

une fois la page publiée, elle est accessible soit en html directement en tapant sur le fichier, soit en .php mais on récupéré juste le contenu html sauvé précédemment.

Lors d'une modification on repasse par la base de données pour régénérer la partie angular et variables comme pour la création.

Voyez-vous un frein à la mise en place de ce système?
Ayant oublier de demander des précisions sur la vidéo .. quels sont les problèmes possibles? J'imagine que ça dépend du player , mais il serait possible de faire un traitement sur les liens des vidéos post envoi serveur pour fabriquer le bon html avant de le placer dans un fichier ou en base?

On aurait un <div data-type="video", data-variable="lienVideo" ></div> par exemple..
Existe-il un équivalent a jdom en php pour repérer ces facilement ces nœuds et les remplacer par le bon objet ou je ne sais quoi ?

Merci d'avance pour toute aide apportée.

Cordialement

Antho

Hors vidéos,le sytème fonctionne. Il n'est même pas nécessaire de stocker les variables de chaque template en base. Une moulinette javascript affectant une valeur par défaut à chaque variable du scope suivant son type (image ou texte) assurera d'avoir toutes les variables dans le scope. (et si l'utilisateur veut jouer au malin, au mieux il pétera sa page temporairement, au pire définitivement :D )

Bonjour.
Il y a une chose que j'ai un peu de mal à comprendre.
Car tu parles de donner la possibilité à l'utilisateur de gérer l'affichage de la page en parlant d'index.php.
Est-ce que ce sera le cas aussi pour les autres pages du site ou est-ce que c'est juste pour son interface membre ?
Ensuite, quand tu dis des vidéos des images, etc ...
Est-ce que ce sera uniquement visible par lui ou est-ce que ce sera visible publiquement et tu autorises combien de médias ?
Et si c'est visible publiquement, dans quel but ?
Je veux dire par là, quel est le thème de ton site en général concernant ce système de personnalisation par l'utilisateur ?
J'ai bien d'autres questions, mais j'attendrais déjà une réponse à ces questions là.

Bonjour Lartak , la mise en place technique que j'ai exposée répondra en partie à tes questions.
Cette mise en place a été testé et fonctionnelle, elle répond, au delta près des vidéos dont le cadre n'est pas encore clair dans le besoin, parfaitement au fonctionnement souhaité.

Le but est en faite de fournir aux utilisateurs "membres" une possibilité de posséder une page accessible publiquement.
Ces pages sont "préfaites" au sens où l'emplacement du texte et des images est déjà prédéfini.

L'utilisateur souhaitant posséder une page choisit alors un template.

Dans ce template il modifie à sa guise ces zones prédéfinis pour y mettre le texte et les images qu'il souhaite.

Une fois satisfait il peut publier sa page sur le site, au sens la rendre accessible à tous.

Il peut ensuite la modifier à nouveau etc...

cordialement

Anthony