Réalisation d'une carte cliquable

par **toone** » 08 juin 2009, 13:43

Il me semble que l'on avait essayé cette solution avec AB, cependant la quantité de donnée n'etant pas définie, AB m'avait aiguillé sur une autre piste avec l'affichage grâce à du PHP, ce qui convenait mieux.

(Il est vrai que cette carte sera utilisée sur un réseau local)

par **Aureusms** » 08 juin 2009, 12:44

Ce que tu peux faire tu charges ta pages complète avec ta carte et les informations de chaque département dans des div par exemple (valable si tu n'a pas trop de données : je pense que cela peut le faire vu que tu dois bosser sur un réseau local):

Code : Tout sélectionner

<div id="dep_95" style="display: none";>
donnée
</div>

Ensuite avec ton onclick tu affiches les données : onclick="document.getElementById('dep_95').style.display='block';"

Tu peux même les position en absolue un peu ou tu veux sur la même page...
Pour résumer : tu les charges en même temps et tu les affiches quand il y a un clic... Penses aussi à prévoir un mode de fermeture de la div (avec onclick="document.getElementById('dep_95').style.display='none';")

Qu'est ce que tu en penses...

par AB » 08 juin 2009, 12:33

Alors, ce topic est résolu ?

par **toone** » 08 juin 2009, 08:22

Voilà le resultat :

Le code :

<div id = tab>
<p><b>
<?php echo 'Département : '.$nom_dep;?>
</b></p>

<table>
    <tr>
        <th>Nom de Maintenance</th>
        <th>Numéro de Maintenance</th>
        <th>Nom des travaux</th>
        <th>Numéro des travaux</th>
        <th>Adresse</th>
    </tr>
<?php foreach ($donnees as $value)
    {
    echo '<tr>';
        echo '<td>'.$value['Nom_Maintenance'].'</td>';
        echo '<td>'.$value['Num_Maintenance'].'</td>';
        echo '<td>'.$value['Nom_Travaux'].'</td>';
        echo '<td>'.$value['Num_Travaux'].'</td>';
        echo '<td>'.$value['Adresse'].'</td>';
    echo '</tr>';
            
    echo '<tr>';
    echo '<td colspan="5" style="border-bottom:1px solid black;background-color:#2F2F4F">';
    echo '</td>';
    echo '</tr>';        
    }
?>
</table> 
</div>

<?php }?>
	
	<!-- CSS -->
	
	<STYLE type="text/css">
       BODY { background-color: #DDDDDD }

	   
#tab{
position : absolute;
top : 150px;
left : 580px;
max-width:850px;
}
th{
   background-color:  #2F2F4F;
   color: white;
   font-size: 0.8em;
   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}

td{
   border: 1px solid black;
   font-family:  "Trebuchet ", Times, "Times New Roman", sans-serif;
   text-align: center; 
   padding: 2px; 
}
	</STYLE>

Je vais voir si je rajoute ou pas un champ "entreprise", car il y aura peut-être une carte par entreprise..

Je vais faire un autre sujet pour mon formulaire d'insertion, car il ne fonctionne pas...

par AB » 04 juin 2009, 16:53

Oui enfin j'avais fait le code à partir du précédent. Mais comme on ne récupère maintenant qu'un département lors de la requête on peut faire plus simple.
Un exemple d'affichage avec tableau avec les entêtes qui ne se répètent pas.
Note qu'il faut que tu fixe une largeur maximale pour ton tableau d'affichage pour pouvoir imposer un retour ligne si les renseignements sont trop longs.

<?php
$query = "SELECT 

Num_Dep,
Nom_Dep,
Nb_Clients

FROM departements ";

$ressource = mysql_query($query) or die(mysql_error());

$StrInfo = array();

while ($resultat = mysql_fetch_assoc($ressource)) 

    {
    $StrInfo[$resultat['Num_Dep']] = $resultat['Nom_Dep'].' : '.$resultat['Nb_Clients'].' contacts dans le département';
    }

// pour contrôle du contenu du tableau en phase de test  

/*echo '<pre>';
print_r($StrInfo);
echo '</pre>'; */

// La deuxième requête serait conditionnelle à l'envoi d'une variable GET nommée par exemple id

$req_info = isset($_GET['id'])?  mysql_real_escape_string($_GET['id']) : null;

$donnees = array();
$nom_dep = null;

if (isset($req_info))
{
$query = "SELECT 

departements.Nom_Dep,

informations.Num_Dep,
informations.Nom_Maintenance,
informations.Num_Maintenance,
informations.Nom_Travaux,
informations.Num_Travaux,
informations.Adresse

FROM departements 

LEFT JOIN informations 

ON departements.Num_Dep = informations.Num_Dep  

WHERE departements.Num_Dep = '".$req_info."'";

$ressource = mysql_query($query) or die(mysql_error());

$i = 0;
while ($resultat = mysql_fetch_assoc($ressource)) 

    {
    $nom_dep = $resultat['Nom_Dep']; 

    $donnees[$i]['Nom_Maintenance'] = $resultat['Nom_Maintenance'];
    $donnees[$i]['Num_Maintenance'] = $resultat['Num_Maintenance'];
    $donnees[$i]['Nom_Travaux'] = $resultat['Nom_Travaux'];
    $donnees[$i]['Num_Travaux'] = $resultat['Num_Travaux'];
    $donnees[$i]['Adresse'] = $resultat['Adresse'];
	$i++;
    }
}
/*echo '<pre>';
print_r($donnees);
echo '</pre>';*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>

</head>

<body>
<?php if (isset($donnees) && count($donnees) > 0) {?>
<div>
<p>
<?php echo 'Département : '.$nom_dep;?>
</p>

<table cellspacing="0" cellpadding="5px" style="border:1px solid black; text-align:center">
	<tr style="background:#000000;color:#FFFFFF;">
		<td>Nom de Maintenance</td>
		<td>Numéro de Maintenance</td>
		<td>Nom des travaux</td>
		<td>Numéro des travaux</td>
		<td>Adresse</td>
	</tr>
<?php foreach ($donnees as $value)
	{
	echo '<tr>';
		echo '<td>'.$value['Nom_Maintenance'].'</td>';
		echo '<td>'.$value['Num_Maintenance'].'</td>';
		echo '<td>'.$value['Nom_Travaux'].'</td>';
		echo '<td>'.$value['Num_Travaux'].'</td>';
		echo '<td>'.$value['Adresse'].'</td>';
	echo '</tr>';
			
	echo '<tr>';
	echo '<td colspan="5" style="border-bottom:1px solid black;">';
	echo '</td>';
	echo '</tr>';		
	}
?>
</table>
</div>
<?php }?>
<div><span title = "<?php echo isset($StrInfo['01'])? $StrInfo['01'] : '' ?>"><a href ="?id=01">Ain</a></span>&nbsp;&nbsp;&nbsp;<span title = "<?php echo isset($StrInfo['03'])? $StrInfo['03'] : '' ?>"><a href ="?id=03">Allier</a></span>

</div>
</body>
</html>

par **toone** » 04 juin 2009, 15:24

J'ai mis en tableau :

suivi de mon code

<body>
<?php if (isset($donnees) && count($donnees) > 0) {?>
<div id = tab >
<?php foreach ($donnees as $value)
    {
    if (is_array($value)) 
	{
            foreach ($value as $result) 
                { 
echo '<b>';
echo 'Département : ';
echo $result['Nom_Departement'];
echo'</b>','<br />';
echo '<table>','<tr>','<th>';
		echo'Nom Maintenance'; 
echo'</th>','<th>'; 
		echo'Numéro Maintenance';
echo'</th>','<th>';
		echo'Nom Travaux';
echo'</th>','<th>'; 
		echo'Numéro Travaux'; 
echo'</th>','<th>';
		echo'Adresse'; 
echo'</th>','</tr>';

echo'<tr>' ,'<td>';
		echo $result['Nom_Maintenance'] ;
echo'</td>','<td>'; 
		echo $result['Num_Maintenance'];
echo '</td>','<td>'; 
		echo $result['Nom_Travaux'] ;
echo '</td>','<td>';
		echo $result['Num_Travaux'];
echo '</td>','<td>'; 
		echo $result['Adresse']; 
echo '</td>','</tr>','</table>';
                }
            }
    }
	
?>
</div>

<?php }?>
	
	<!-- CSS -->
	
	<STYLE type="text/css">
       BODY { background-color: #DDDDDD }
	   
#tab{
	  position : absolute;
	  top : 150px;
	  right : 10px;
	   }
th{
   background-color:  #2F2F4F;
   color: white;
   font-size: 1em;
   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}

td{
   border: 1px solid black;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   text-align: center; 
   padding: 2px; 
}

	</STYLE>

J'ai essayé de bidouiller pour qu'il n'y ai qu'une seule fois afficher le departement, mais sans succès, ce n'est pas bien grave.

et je crois qu'il faut que je rajoute une donnée dans mes infos, l'entreprise! je vais donc compléter sa.

par AB » 04 juin 2009, 12:35

Si tu n'as que quelques clients par département cette présentation peu suffire. Mais si tu en a plus tu pourrais peut être penser à travailler la présentation des résultats sous forme de tableau ce qui te ferais gagner de la place :

Ain

Nom Maintenance Num maintennace Nom travaux Num travaux Adresse
Maintenance toto 0101 Travaux toto 01011 Adresse 1
Maintenance titi 0102 Travaux titi 01012 Adresse 2

Pour le faire, les infos retournées dans le div sont suffisantes. Il suffit de changer la présentation.

par **toone** » 04 juin 2009, 09:11

Yep!

Bon me voici avec une page à peu près correcte(style peut être à peaufiner):

Maintenant je dois voir pour finir ce qui est "insertion" de nouveau client!

par AB » 02 juin 2009, 12:41

Le div qui affiche les données tu le met en style="position:absolute" et tu le case où tu veux, même principe que le positionnement du div qui affichait tes données en javascript.

par **toone** » 02 juin 2009, 08:57

Bonjour!!

Alors j'ai tester le code de cette façon :

Je me suis servi des div suivants :

<div><span title = "<?php echo isset($StrInfo['01'])? $StrInfo['01'] : '' ?>"><a href ="?id=01">Ain</a></span>&nbsp;&nbsp;&nbsp;<span title = "<?php echo isset($StrInfo['03'])? $StrInfo['03'] : '' ?>"><a href ="?id=03">Allier</a></span>

pour adapter et avoir ces areas :

 <area shape="poly" coords="300,281,302,277,306,274,310,275,313,274,315,271,315,268,315,264,317,260,324,260,326,257,330,256,333,260,335,262,342,262,342,264,348,262,351,265,356,271,361,272,366,272,367,275,373,277,368,279,368,283,365,285,362,288,363,291,365,295,366,301,366,306,360,306,360,303,355,303,351,301,346,301,344,302,340,302,334,301,330,298,330,294,330,290,327,288,324,291,322,293,319,294,317,296,315,299,312,296,313,293,309,290,304,287,301,285"  onclick = a href ="?id=03" title = "<?php echo isset($StrInfo['03'])? $StrInfo['03'] : '' ?>" onMouseOver="change_image(0,color3)"onMouseOut="change_image(0,color3)" />

Ce qui donne pour l'Ain :

Cependant pour la mise en forme il faut plutôt que je garde les span et div non??

par **toone** » 31 mai 2009, 00:41

bien qu'étant en week end, ça me titille quand même! je vais surement essayer de tester ce code demain.

La démarche correspond à ce que j'avais vu avec mon collègue, les requêtes en php seront plus 'solides' si la base se remplie beaucoup.

Bonne nuit!!

par AB » 30 mai 2009, 11:13

L'id auto incrémenté de ta table "départements" ne sert à rien. Il serait plus judicieux de le remplacer par une colonne indiquant le numéro du département (qui est une donnée significative également unique mais qui pourrait resservir). Notamment tu aurais une cohérence entre le numéro de département et les appels de tes fonctions . J'avais d'ailleurs écrit les requêtes dans ce sens.

Donc ce serait mieux si tu faisais
Table departements :

Num_Dep : numéro du département
Nom_Dep : nom du département
Nb_Clients : nombre de clients

Table informations :

Num_Dep : numéro de département
Nom_Maintenance : nom de maintenance
Num_Maintenance : numéro de maintenance
Nom_Travaux : nom des travaux
Num_Travaux : numéro des travaux
Adresse : adresse
id : id auto incrémenté

Voir un exemple de ces table en fin de post

Dans les deux tables Num_Dep est de type varchar 3 ce qui te permettra de rentrer directement 01 par exemple.

Donc avec cette structure, cela pourrait donner :

<?php

// connexion à la bdd
//...


$query = "SELECT 

Num_Dep,
Nom_Dep,
Nb_Clients

FROM departements ";

$ressource = mysql_query($query) or die(mysql_error());

$StrInfo = array();

while ($resultat = mysql_fetch_assoc($ressource)) 

    {
    $StrInfo[$resultat['Num_Dep']] = $resultat['Nom_Dep'].' : '.$resultat['Nb_Clients'].' contacts dans le département';
    }

// pour contrôle du contenu du tableau en phase de test  

/*echo '<pre>';
print_r($StrInfo);
echo '</pre>'; */

// La deuxième requête serait conditionnelle à l'envoi d'une variable GET nommée par exemple id

$req_info = isset($_GET['id'])?  mysql_real_escape_string($_GET['id']) : null;
$donnees = array();

if (isset($req_info))
{
$query = "SELECT 

departements.Nom_Dep,

informations.Num_Dep,
informations.Nom_Maintenance,
informations.Num_Maintenance,
informations.Nom_Travaux,
informations.Num_Travaux,
informations.Adresse

FROM departements 

LEFT JOIN informations 

ON departements.Num_Dep = informations.Num_Dep  

WHERE departements.Num_Dep = '".$req_info."'";

$ressource = mysql_query($query) or die(mysql_error());

$i = 0;
while ($resultat = mysql_fetch_assoc($ressource)) 

    {
    $num_dep = sprintf("%02d", $resultat['Num_Dep']); 

    $donnees[$num_dep][$i]['Nom_Departement'] = $resultat['Nom_Dep'];
    $donnees[$num_dep][$i]['Nom_Maintenance'] = $resultat['Nom_Maintenance'];
    $donnees[$num_dep][$i]['Num_Maintenance'] = $resultat['Num_Maintenance'];
    $donnees[$num_dep][$i]['Nom_Travaux'] = $resultat['Nom_Travaux'];
    $donnees[$num_dep][$i]['Num_Travaux'] = $resultat['Num_Travaux'];
    $donnees[$num_dep][$i]['Adresse'] = $resultat['Adresse'];
	$i++;
    }
}
/*echo '<pre>';
print_r($donnees);
echo '</pre>';*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
</head>

<body>
<?php if (isset($donnees) && count($donnees) > 0) {?>
<div>
<?php foreach ($donnees as $value)
	{
	if (is_array($value)) 
			{
			foreach ($value as $result) 
				{
				echo '<p>';
				echo 'Département : '.$result['Nom_Departement'].'<br />';
				echo 'Nom de Maintenance : '.$result['Nom_Maintenance'].'<br />';
				echo 'Numéro de Maintenance : '.$result['Num_Maintenance'].'<br />';
				echo 'Nom des travaux : '.$result['Nom_Travaux'].'<br />';
				echo 'Numéro des travaux : '.$result['Num_Travaux'].'<br />';
				echo 'Adresse : '.$result['Adresse'];
				echo '</p>';
				}
			}
	}
?>
</div>
<?php }?>
<div><span title = "<?php echo isset($StrInfo['01'])? $StrInfo['01'] : '' ?>"><a href ="?id=01">Ain</a></span>&nbsp;&nbsp;&nbsp;<span title = "<?php echo isset($StrInfo['03'])? $StrInfo['03'] : '' ?>"><a href ="?id=03">Allier</a></span>

</div>
</body>
</html>

A tester avec ce jeu de tables

Code : Tout sélectionner

CREATE TABLE `departements` (
  `Num_Dep` varchar(3) NOT NULL,
  `Nom_Dep` varchar(100) NOT NULL,
  `Nb_Clients` mediumint(8) unsigned default NULL,
  PRIMARY KEY  (`Num_Dep`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

-- 
-- Contenu de la table `departements`
-- 

INSERT INTO `departements` (`Num_Dep`, `Nom_Dep`, `Nb_Clients`) VALUES 
('01', 'Ain', 2),
('03', 'Allier', 1);

-- --------------------------------------------------------

-- 
-- Structure de la table `informations`
-- 

CREATE TABLE `informations` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `Num_Dep` varchar(3) NOT NULL,
  `Nom_Maintenance` varchar(100) default NULL,
  `Num_Maintenance` varchar(100) default NULL,
  `Nom_Travaux` varchar(100) default NULL,
  `Num_Travaux` varchar(100) default NULL,
  `Adresse` tinytext,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;

-- 
-- Contenu de la table `informations`
-- 

INSERT INTO `informations` (`id`, `Num_Dep`, `Nom_Maintenance`, `Num_Maintenance`, `Nom_Travaux`, `Num_Travaux`, `Adresse`) VALUES 
(1, '01', 'Maintenance 01 1 ', 'Numéro maintenance 01 1', 'Travaux 01 1', 'Num travaux 01 1', 'Adresse 01 1'),
(2, '01', 'Maintenance 01 2', 'Numéro maintenance 01 2', 'Travaux 01 2', 'Num_travaux 01 2', 'Adresse 01 2'),
(3, '03', 'Nom Maintenance 03 1', 'Num Maintenance 03 1', 'Nom travaux 03 1', 'Num travaux 03 1', NULL);

par **toone** » 29 mai 2009, 16:47

Après consultation avec la personne qui a commencé le projet, il faudrait en effet faire les requêtes sur les liens de departements.

Pour le schéma de mes tables, je pense, mais je suis ouvert à toutes propositions

par AB » 29 mai 2009, 16:42

Alors tu n'a pas répondu à ce message
http://www.phpfrance.com/forums/voir_re ... php#292553

Notamment :
Si l'on charge tout le tableau en javascript, cela implique un nombre limité de lignes par département puisque l'on charge tous les départements et toutes ses lignes correspondantes. Si tu ne veux pas être limité il faut faire une requête sur le lien de ton département.

Donc dans ce dernier cas tu auras deux requêtes distinctes: une dans ta table departements pour afficher les info bulles et une seconde pour aller rechercher les informations complémentaires onclick.

Mais avant cela es-tu certain du schéma de tes tables ?

par **toone** » 29 mai 2009, 14:03

EDIT :

Alours de retour sur le topic ^^

Donc je vais mieux reformuler ce que j'ai :

- Une BDD 'clients':

=> une table departements dont voici un extrait :

=> une table informations qui n'est pas complète, elle regroupera les infos sur les clients des départements:

=> De l'affichage JavaScript qui permet onclick d'afficher les infos détaillées

Cela fonctionne, seulement j'avais testé comme on le voit dans la table informations d'avoir plusieurs champs avec le même nom de département, mais lors de la requête onclick, ça n'affiche qu'un seul des champs.

=> Des pages afin d'insérer de nouveaux clients(formulaires), et ceci protégé par mot de passe

__________________________________________________________________________________

A faire (je pense) et là où j'aurais besoin d'aide :

* Des requêtes PHP/MySQL pour insérer dans la BDD de nouveaux clients.

* Re"formater" ma base pour que l'insertion d'un nouveau client puisse être afficher correctement :s

_________________________________________________________________________________

Concernant le contenu des informations détaillées, je vais faire valider par mon maître de stage l'importance des données, mais cela ne devrait pas être trop excessif par départements.

Réalisation d'une carte cliquable

Répondre

Étendre la vue Revue du sujet : Réalisation d'une carte cliquable