6.2 Application
dewebmapping
6.2.1 Conception et
modélisation de la base de donnes
6.1.1.1 Le modèle conceptuel des
données
6.1.1.1.1 Identification des objets
Après des analyses approfondies, nous avons
identifié les entités ci-après:
Ø Axe routier
Ø Entreprise
Ø Inspecteur
Ø Route
Ø Paramètre géographique
Ø Province
6.1.1.1.2 Identification et description des
relations
Les relations trouvent entre les différentes
entités sont les suivantes :
Ø Avoir
Ø Localiser
Ø Réhabiliter
Ø Observer
Ø Peut avoir
|
N°
|
Relation
|
Objets associes
|
|
1
|
avoir
|
Routes-Axe Routier
|
|
2
|
Localiser
|
Province-Axe Routier
|
|
4
|
Réhabiliter
|
Entreprise-Axe Routier
|
|
5
|
Observer
|
Inspecteur-Axe Routier
|
|
6
|
Peut avoir
|
Paramètre géo-Axe Routier
|
Tableau 3 Représentation des relations
6.1.1.1.3 Définition des contraintes des
cardinalités et d'intégrité fonctionnelle
En informatique, les contraintes ce sont les nombres
d'occurrences minimales et maximales d'objet qui participent à une
relation.
|
N°
|
Objet1
|
Cardinalité1
|
Relation
|
Cardinalité2
|
Objet2
|
|
1
|
Route
|
1,n
|
avoir
|
1,1
|
Axe Routier
|
|
2
|
Province
|
1,n
|
Localiser
|
1,n
|
Axe Routier
|
|
4
|
Entreprise
|
1,n
|
Réhabiliter
|
1,1
|
Axe Routier
|
|
5
|
Inspecteur
|
1,n
|
Observer
|
1,n
|
Axe Routier
|
|
6
|
Paramètre géo
|
1,1
|
Peut avoir
|
1,n
|
Axe Routier
|
Tableau 3 Présentation des contraintes de
cardinalités et d'intégrité fonctionnelle
1,n
251641856
Figure 19modèle conceptuel de données
2516500486.1.1.1.1 Présentation du
modèle conceptuel de données
1,n
Province
Idpro
nompro
251616256251631616251621376251622400
Parametregeo
Idpar
Comm_par
Longitude
latitude
251613184
1,n
251649024251619328
Axeroutier
idaxe
Nomaxe
Comm_axe
Taille_axe
Cout
Duree
Date_debut
Date_fin
251614208251635712
Localiser
251628544251636736
Réhabiliter
251629568
1,n
251676672
1,n
251644928
1,1
251642880
1,n
251645952
1,n
251646976
1,1
251643904
1,1
251640832251639808251638784
Peut avoir
251625472251637760251632640251634688251633664251630592
Observer
251627520
Avoir
251626496251623424
Inspecteur
idins
Matricule
Nomobs
Postnom
E-mail
251617280
Routes
idroute
Nomroute
Comm_route
Type_route
Nbredekm
251615232251624448251620352
Entreprise
identre
Nomentre
Numphone
Adresse
Siteweb
E-mail
2516183046.1.1.2 Modèle logique de
données
Province
idpro
nompro
251654144251659264251661312
Inspecteur
#idins
Matricule
Nomobs
Postnom
E-mail
251655168
Routes
#idroute
Nomroute
Comm_route
Type_route
Taille_route
251653120251662336251658240
Entreprise
#identre
Nomentre
Numphone
Adresse
Siteweb
E-mail
251656192
Parametregeo
Idpar
Comm_par
Longitude
Latitude
#idaxe
251651072251667456251665408
Figure 20modèle logique de données
251674624251660288251668480
Axeroutier
idaxe
Nomaxe
Comm_axe
Taille_axe
Coût
Duree
Date_debut
Date_fin
#idroute
#identre
251652096251664384251672576
Observer
idlocalise
#idins
#idaxe
251671552251663360251670528
Localiser
idlocalise
#idpro
#idaxe
251669504251666432251657216251673600
6.1.1.1 6.1.1.3 Le modèle physique de
données
Figure 21 Modèle physique de données
Fig.18 modèle physique de données
6.2.2 Présentation
des quelques interfaces
6.2.2.1 Interface Administrateur
Interface d'enregistrement Axe routier
Figure 22 Interface de mise à jour Axe
Routier
Après s'être loguer, l'administrateur aura une
interface d'accueil pour naviguer dans l'application en vue de mettre à
jour les données.
Comme nous pouvons l'apercevoir sur cette interfaceà
gauche,nous avons notre menu principal qui nous permettra de passer d'une
interface à une autre. La partie droite représente notre
formulaire qui permettra de saisir les données relatives à l'axe
routier.
Interface d'enregistrement de paramètre
géographique
Figure 23 Interface d'enregistrement de données
géographique
Sur cette interface nous aurons la possibilité
d'insérer les cordonnées géographique d'une
itinérairedans notre base de données MySQLqui correspondra
à un axe qui est en cours de réhabilitation.
Comment vous pouvez le remarquer, le nombre de ligne
Paramètre géo correspond au nombre de ligne de notre tableau dans
lequel on effectue la saisie.
6.2.2.2 Interface internaute
251679744
Figure 24 Carte géographique de Kinshasa
La carte sur la figure suivante représente la vie de
Kinshasa, nous pouvons nous apercevoir des traits rouges qui
représentent les itinéraires qui sont en cours de
réhabilitation dans la ville de Kinshasa.
NB : On a eu à utiliser de données test
pour donner l'aperçu.
251680768
Figure 25 Carte géographique de la ville de
Lubumbashi
6.2.3 Quelque code de
l'application
Classe connexion à la base de
données
<?php
ClassgoogleConnexion{
static function Connexion(){
try{
$bkas = new PDO('mysql:host=localhost;dbname=geodata', 'root',
'');
return$bkas;
}
catch (Exception $e)
{
echo 'Impossible de se connecter au serveur';
die('Erreur : ' . $e->getMessage());
}
}// Fin de la fonction
}// Fin de la class
?>
Code JavaScript permettant de créer la carte et
dessiner le parcours
varlatlng = new google.maps.LatLng(-4.323303, 15.308161);
var options = {
center: latlng,
zoom: 20,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var carte = new
google.maps.Map(document.getElementById("carte"),
options);
Dans Google Maps les coordonnées sont sous formes de
latitude et de longitude. La librairie Google Maps met àdisposition un
constructeur permettant de créer un objet de classe
google.maps.LatLng(lat:number,lng:number) qui prend en paramètre des
nombres représentant, respectivement, la latitude et la longitude.
var traceParcours = new google.maps.Polyline({
path: parcours,//chemin du tracé
strokeColor: "#FF0000",//couleur du tracé
strokeOpacity: 1.0,//opacité du tracé
strokeWeight: 2//grosseur du tracé});
Code html de l'Interface d'accueil
<?php
include("connexion/connexion.php");
$conn =new googleConnexion();
$rep = $conn->Connexion();
/*$rep ;*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css"
title="Design" href="css_jsp/design.css" />
<script language="JavaScript" src="css_jsp/jquery.js"
type="text/javascript"></script>
<script language="JavaScript" src="css_jsp/j_scode.js"
type="text/javascript"></script>
<title>GeoServer</title>
</head>
<body>
<div id="gauche">
<div id="logo"><imgsrc="images/logo.png" width="200"
height="50" /></div>
<p></p>
<center>
<table>
<tr>
<td><a
href="accueil.php?nav=1"><imgsrc="images/b_home.png" width="16"
height="16" /></a></td>
<td><a
href="accueil.php?nav=2"><imgsrc="images/b_sqlhelp.png" width="16"
height="16" /></a></td>
<td><a
href="accueil.php?nav=3"><imgsrc="images/b_docs.png" width="16"
height="16" /></a></td>
<td><a
href="accueil.php?nav=4"><imgsrc="images/s_reload.png" width="16"
height="16" /></a></td>
</tr>
</table>
</center>
<p></p>
<div class="menu">
<table>
<tr>
<td><imgsrc="images/b_selboard.png" width="16"
height="16" /></td><td> <a
href="accueil.php?nav=1">Accueil</a></td>
</tr>
<tr>
<td><imgsrc="images/b_selboard.png" width="16"
height="16" /></td><td> <a
href="accueil.php?nav=5">Axe Routier</a></td>
</tr>
<tr>
<td><imgsrc="images/b_selboard.png" width="16"
height="16" /></td><td> <a
href="accueil.php?nav=6">Entreprise</a></td>
</tr>
<tr>
<td><imgsrc="images/b_selboard.png" width="16"
height="16" /></td><td> <a
href="accueil.php?nav=7">Inspecteur</a></td>
</tr>
<tr>
<td><imgsrc="images/b_selboard.png" width="16"
height="16" /></td><td> <a
href="accueil.php?nav=8">Route</a></td>
</tr>
<tr>
<td><imgsrc="images/b_selboard.png" width="16"
height="16" /></td><td> <a
href="accueil.php?nav=9">Province</a></td>
</tr>
</table>
</div>
</div>
<div id="droit">
<div class="entete">
<table>
<tr>
<td><imgsrc="images/s_host.png" width="16"
height="16" /></td>
<td>localhost</td>
</tr>
</table>
</div>
<div class="corpss">
<div class="menuAj">
<table>
<tr>
<td><a href="#"><imgsrc="images/OK.gif"
width="20" height="20" /></a></td>
<td><a href="#"><imgsrc="images/RECHERCHE.gif"
width="20" height="20" /></a></td>
<td><a href="#"><imgsrc="images/AJOUTE.gif"
width="20" height="20" /></a></td>
<td><a href="#"><imgsrc="images/FERMER.gif"
width="20" height="20" /></a></td>
</tr>
</table>
</div>
<fieldset>
<legend>Axe Routier</legend>
<table>
<tr>
<td>Nom</td><td><input name="nomaxe"
type="text"/></td>
<td>Nom route</td><td>
<?php
include("comboR/nomroute.php");
?>
</td>
</tr>
<tr>
<td>Commentaire;</td><td><input
name="commtaxe" type="text"/></td>
<td>Entreprise</td><td>
<?php
include("comboR/entreprise.php");
?>
</td>
</tr>
<tr>
<td>Date début</td><td><input
name="date_debut" type="date"/></td>
<td>Privince</td><td>
<?php
include("comboR/province.php");
?>
</td>
</tr>
<tr>
<td>Date fin</td><td><input name="nom"
type="date_fin" /></td>
<td> Nombre
de ligneParametre geo</td><td><input name="nbrligne"
type="text"/></td>
</tr>
<tr>
<td>Coût</td><td><input name="cout"
type="text" placeholder="En Dollars"/></td>
<td></td><td></td>
</tr>
<tr>
<td>Taille de l'axe</td><td><input
name="taille" type="text" placeholder="Km"/></td>
<td></td><td></td>
</tr>
</table>
</fieldset>
<div class="tabl">
</div>
</div>
</div>
</body>
</html>
Classe de mise à jour axe routier
<?php
Class miseajouraxe{
public function supprimerAxe($idaxe){
$bkas->exec('DELETE FROM axeroutier WHERE
idaxe=\''.$idaxe.'\'');
echo 'Suppression effectuer';
}
public functionenregistrerAxe($nomaxe, $commtaxe,
$date_debut, $date_fin, $cout, $taille, $duree, $idroute, $identre, $pro){
$bkas->exec('INSERT INTO
axeroutier(idaxe,nomaxe,comm_axe,taille_axe,idroute,identre,date_debut,date_fin,cout,Duree)
VALUES(NULL, \''.$nomaxe.'\', \''.$commtaxe.'\', \''.$taille.'\',
\''.$idroute.'\', \''.$identre.'\', \''.$date_debut.'\', \''.$date_fin.'\',
\''.$cout.'\', \''.$duree.'\')');
echo 'enregistrement effectuer';
}
public functionmodifierAxe($idaxe,$nomaxe, $commtaxe,
$date_debut, $date_fin, $cout, $taille, $duree, $idroute, $identre, $pro){
$bkas->exec('UPDATE axeroutier SET
nomaxe=\''.$nomaxe.'\',comm_axe=\''.$commtaxe.'\',date_debut=\''.$date_debut.'\',date_debut=\''.$date_fin.'\',cout=\''.$cout.'\',duree=\''.$duree.'\',taille=\''.$taille.'\'
WHERE idaxe=\''.$idaxe.'\'');
echo 'Modification effectuer';
}
}
?>
| 
