Projet ORGANIGRAMME online

par **Aureusms** » 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.
!...

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

par **Nours312** » 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.

!...

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 @++

par **Aureusms** » 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;
}

par **Nours312** » 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 )

@++

par **Yosh** » 16 avr. 2010, 14:12

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

http://astuteo.com/slickmap/

par **Calimero** » 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).

par **visualight** » 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

par **stealth35** » 12 avr. 2010, 13:56

regarde du coté de GD
http://php.net/manual/fr/book.image.php

par **Antoine02** » 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

par **Yosh** » 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é...

par **Antoine02** » 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.

Projet ORGANIGRAMME online

Répondre

Étendre la vue Revue du sujet : Projet ORGANIGRAMME online

Re: Projet ORGANIGRAMME online

Re: Projet ORGANIGRAMME online

Re: Projet ORGANIGRAMME online

Re: Projet ORGANIGRAMME online

Re: Projet ORGANIGRAMME online

Re: Projet ORGANIGRAMME online

Re: Projet ORGANIGRAMME online

Re: Projet ORGANIGRAMME online

Re: Projet ORGANIGRAMME online

Re: Projet ORGANIGRAMME online

Projet ORGANIGRAMME online