Projet ORGANIGRAMME online

Petit nouveau ! | 2 Messages

12 avr. 2010, 13:34

Bonjour à toutes et tous.

Très heureux de découvrir ce site, je me permet de vous présenter mon projet.
Je compte réaliser pour un intranet, un organigramme d'entreprise. Cette organigramme
sera administré via une interface d'administration. Le language sera du PHP, et la base
du MySQL.

Je suis tombé sur une interface que je trouve très bien réalisée, celle d'oracle :
http://farm3.static.flickr.com/2467/401 ... 6127_o.png

Voilà ma question :

Je compte afficher par ligne, les membres d'un niveau.
Exemple :
niveau 1 (le directeur), 1 personne, 1 case
niveau 2, 3 personnes, 3 cases

Je pense aussi faire attention à la méthode de rattachement hierachique entre les personnes.

Cependant, le gros soucis, c'est le dessin des traits entre les cases. Quelqu'un à une idée ?

Tous vos conseils sont les bienvenus.

Merci d'avance.

Mammouth du PHP | 568 Messages

12 avr. 2010, 13:37

Salut,

Regarde ça: http://morrisonpitt.com/jsPlumb/html/demo2.html

Je pense que ça répond à ton besoin, faut juste adapté...

Petit nouveau ! | 2 Messages

12 avr. 2010, 13:52

Merci du tuyaux Yosh, mais la présentation de mon organigramme ne doit pas être déformable ...
Et là, l'intérêt de ton site, et qu'on peut bouger les différents éléments tout en conservant un lien
de raccordement.

De mon côté, j'aimerais juste relier mes cases comme sur l'exemple d'Oracle :
http://farm3.static.flickr.com/2467/401 ... 6127_o.png

Voilà.

Antoine

ViPHP
ViPHP | 5462 Messages

12 avr. 2010, 13:56


Eléphant du PHP | 428 Messages

12 avr. 2010, 14:00

Cependant, le gros soucis, c'est le dessin des traits entre les cases. Quelqu'un à une idée ?

Tous vos conseils sont les bienvenus.

Merci d'avance.
1. Un editeur du type photoshop ou gimp
2. créer des différents traits suivant ton gôut
3. Enregistrer en PGN ou GIF pour avoir le fond transparent
4. Créer une feuille de style
5. Créer un document PHP
6. Créer les container DIV que tu as besoin pour ton organigramme est rendre le tout dynamique par l'encodage dans une table
7. Coder ta feuille de style en n'oubliant pas d'y mettre tes images des traits que tu as créé en background image
8. Tester et rectifier
9. Revenir nous voir avec tes problèmes liés à la conception de l'organigramme
10. Ca va faire de toi un homme heureux ;)

A+
raph

ViPHP
ViPHP | 2287 Messages

12 avr. 2010, 14:22

Contrairement aux autres membres, qui semblent se focaliser sur l'affichage, je te conseillerai plutôt de porter ton attention sur la conception du système et de voir la mise en forme dans un deuxième temps.

Un organigramme ça bouge plutôt pas mal (c'est sa raison d'être, sinon tu le ferais sur du papier...). Selon l'organisation il peut y avoir des particularités dans la hiérarchie qui auront un impact sur la présentation.

Si tu as moins de 200 noms à y faire figurer, un fichier xml peut-être une bonne idée pour le stockage (facile à manipuler directement pour le mettre à jour).
if(!@work()){ Nespresso(); } else { what(); }
______________________________

Mammouth du PHP | 568 Messages

16 avr. 2010, 14:12

Je viens de trouver ça, si ça peut t'aider

http://astuteo.com/slickmap/

Mammouth du PHP | 661 Messages

16 avr. 2010, 20:03

Je viens de trouver ça, si ça peut t'aider

http://astuteo.com/slickmap/

pas bête du tout !... on veux souvent plus se compliquer qu'autre chose alors que le plus simple est souvent le plus efficace ^^

Merci pour le lien ;)

donc je décris vite fait le comportement :
Architecture <ul> <li><a></a> <ul><li><a></a> .... </li></ul></li><li><a></a></li></ul> (classique en PHP) ...
// les <a> peuvent être remplacés par des <span> ou autres !
puis une mise en forme adaptée en CSS (penser à intervertir les liaisons horizontales /verticales), et se donner des limites dans l'arborescence (en nombre de générations ) ;)

@++

ViPHP
ViPHP | 1996 Messages

18 avr. 2010, 10:13

Je viens de trouver ça, si ça peut t'aider

http://astuteo.com/slickmap/

pas bête du tout !... on veux souvent plus se compliquer qu'autre chose alors que le plus simple est souvent le plus efficace ^^

Merci pour le lien ;)

donc je décris vite fait le comportement :
Architecture <ul> <li><a></a> <ul><li><a></a> .... </li></ul></li><li><a></a></li></ul> (classique en PHP) ...
// les <a> peuvent être remplacés par des <span> ou autres !
puis une mise en forme adaptée en CSS (penser à intervertir les liaisons horizontales /verticales), et se donner des limites dans l'arborescence (en nombre de générations ) ;)

@++
Au risque d'être puriste :
<ul> <li><a></a> <ul><li><a></a> .... </li></ul></li><li><a></a></li></ul> est de l'HTML pas du PHP.
Il ne faut pas confondre positionnement apparent via CSS (que je trouve ici être la bonne solution) et interprétation PHP.
Dans ton cas, il faudra que utilises les positions (absolute ou relative et même les float). Mets ces positions sur les <div> en ligne de niveau :
<div id="niveau_0">
	<div class="gars">
		<div>
			<img src="images_du_gars_01"  />
			<p>Son nom</p>
			<p>Son Prénom</p>
			<p>Sa fonction</p>
		</div>
		<div>
			<p>Ses coordonnées</p>
			<p>Autres données</p>
		</div>
	</div>
</div>

<div id="niveau_1">
	<div class="gars">
		<div>
			<img src="images_du_gars_11"  />
			<p>Son nom</p>
			<p>Son Prénom</p>
			<p>Sa fonction</p>
		</div>
		<div>
			<p>Ses coordonnées</p>
			<p>Autres données</p>
		</div>
	</div>
	<div class="gars">
		<div>
			<img src="images_du_gars_12"  />
			<p>Son nom</p>
			<p>Son Prénom</p>
			<p>Sa fonction</p>
		</div>
		<div>
			<p>Ses coordonnées</p>
			<p>Autres données</p>
		</div>
	</div>
	<div class="gars">
		<div>
			<img src="images_du_gars_13"  />
			<p>Son nom</p>
			<p>Son Prénom</p>
			<p>Sa fonction</p>
		</div>
		<div>
			<p>Ses coordonnées</p>
			<p>Autres données</p>
		</div>
	</div>
</div>

Code : Tout sélectionner

#niveau_0, #niveau_1 { clear: both; position: relative; margin-right: auto; margin-left: auto; } .gars { float: left; height : 100px; width: 150px; }
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr

Mammouth du PHP | 661 Messages

18 avr. 2010, 11:57

Au risque d'être puriste :
<ul> <li><a></a> <ul><li><a></a> .... </li></ul></li><li><a></a></li></ul> est de l'HTML pas du PHP.
:lol: !... :P

en effet, il est évident que ce n'est pas du php !... heureusement ^^ ... ce que je voulais dire par là, c'est que c'est assez simple de générer ce style d'architecture HTML, en PHP : depuis un tableau (array) extrait de la BDD (MySQL ou autre) ...

Sur ce @++ ;)

ViPHP
ViPHP | 1996 Messages

18 avr. 2010, 12:20

Au risque d'être puriste :
<ul> <li><a></a> <ul><li><a></a> .... </li></ul></li><li><a></a></li></ul> est de l'HTML pas du PHP.
:lol: !... :P

en effet, il est évident que ce n'est pas du php !... heureusement ^^ ... ce que je voulais dire par là, c'est que c'est assez simple de générer ce style d'architecture HTML, en PHP : depuis un tableau (array) extrait de la BDD (MySQL ou autre) ...

Sur ce @++ ;)
Pas de problème :D
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr